這是一個挺常見的前端面試題，但是沒有做過總結。有的時候可能會使用完了，很長一段時間不去使用，會慢慢忘記。所以，溫故而知新，還是很有必要的。
一、絕對定位元素的居中實現
這一種工作中用的應該是最多的，兼容性也是很好。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>絕對定位元素的居中實現margin</title> 8 <style> 9 .center-vertical{ 10 width: 100px; 11 height: 100px; 12 background: orange; 13 position: absolute; 14 top: 50%; 15 left: 50%; 16 margin-top: -50px; /*高度的一半*/ 17 margin-left: -50px; /寬度的一半*/ 18 } 19 </style> 20 </head> 21 <body> 22 <div class="center-vertical"></div> 23 </body> 24 </html>
效果：
缺點：需要提前知道元素的尺寸。如果不知道元素尺寸，這個時候就需要JS獲取了。
CSS3.0的興起，使這個問題有了更好的解決方法，就是使用 transform 代替 margin 。
transform 中 translate 偏移的百分比是相對於自身大小而說的。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>未知寬高的元素水平垂直居中transform</title> 8 <style> 9 .content{ 10 background: orange; 11 position: absolute; 12 top: 50%; 13 left: 50%; 14 transform: translate( -50%, -50%); 15 } 16 </style> 17 </head> 18 <body> 19 <div class="content">你復合1233肥反反復復</div> 20 </body> 21 </html>
效果：
優點：無論絕對定位元素的尺寸是多少，它都是水平垂直居中顯示的。
缺點：就是兼容性問題。
二、margin: auto;實現絕對定位元素的居中
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>margin:auto實現絕對定位元素的居中</title> 8 <style> 9 .center-vertical{ 10 width: 100px; 11 height: 100px; 12 background: orange; 13 position: absolute; 14 top: 0; 15 left: 0; 16 right: 0; 17 bottom: 0; 18 margin: auto; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="center-vertical"></div> 24 </body> 25 </html>
效果：
注意：
上下左右均為 0 位置絕對定位。
margin: auto;
三、CSS3.0彈性布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>水平垂直居中==彈性布局</title> 8 <style> 9 html,body{ 10 width: 100%; 11 height: 100%; 12 margin: 0; 13 padding: 0; 14 } 15 body{ 16 display: flex; 17 align-items: center;/*定義body的元素垂直居中*/ 18 justify-content: center;/*定義body的元素水平居中*/ 19 } 20 .content{ 21 width: 300px; 22 height: 300px; 23 background: orange; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="content"></div> 29 </body> 30 </html>
效果：
四、vertical-align:middle;垂直方向居中
verical-align 定義行內元素的基線相對於該元素所在行的基線的垂直對齊。
允許指定負長度值和百分比值。這會是元素降低而不是升高。
在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>vertical-align:middle;</title> 8 <style> 9 .big-box{ 10 width: 500px; 11 height: 400px; 12 background: green; 13 text-align: center; 14 } 15 .box{ 16 line-height: 400px; 17 } 18 img{ 19 vertical-align: middle; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="big-box"> 25 <span class="box"> 26 <img src="ermao.jpg"/> 27 </span> 28 </div> 29 </body> 30 </html>
效果：
五、display:table實現
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>display: table-cell;</title> 8 <style> 9 .parent{ 10 width: 300px; 11 height: 300px; 12 background: orange; 13 text-align: center; 14 display: table; 15 } 16 .son{ 17 display: table-cell; 18 background-color: yellow; 19 vertical-align: middle; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="parent"> 25 <div class="son">nihaosssss</div> 26 </div> 27 </body> 28 </html>
效果：
六、相對定位
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>實現水平垂直居中==相對定位實現</title> 8 <style> 9 html,body{ 10 width: 100%; 11 height: 100%; 12 margin: 0; 13 padding: 0; 14 } 15 .content{ 16 width: 300px; 17 height: 300px; 18 background: orange; 19 margin: 0 auto;/*水平居中*/ 20 position: relative;/*設置position*/ 21 top: 50%; /*偏移*/ 22 /*margin-top: -150px;*/ /*第一種：margin-top*/ 23 transform: translateY(-50%);/*第二種：transform：轉換*/ 24 } 25 </style> 26 </head> 27 <body> 28 <div class="content"></div> 29 </body> 30 </html>
效果：
