这是一个挺常见的前端面试题，但是没有做过总结。有的时候可能会使用完了，很长一段时间不去使用，会慢慢忘记。所以，温故而知新，还是很有必要的。
一、绝对定位元素的居中实现
这一种工作中用的应该是最多的，兼容性也是很好。
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>
效果：
