一、前言：
垂直居中有很多方式，我们要做的不是写出完美代码，而是在合适的情况下根据需求选择合适方式。
主要方式：
- line-height
- 绝对定位
- 表格 display：table-cell
主要需求：
- 固定宽高
- 不固定宽高
主要兼容：
- ie8+ 主流浏览器
- ie6,7
二、行高
1. 利用行高与高度相同，实现单行文本居中
缺点：只能是单行文本
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 .d1{width: 200px;height: 200px;background-color: blue;line-height: 200px;} 7 </style> 8 </head> 9 <body> 10 <div class="d1"> 11 fdsfdsfdsfdfsfds 12 </div> 13 </body> 14 </html>
2.利用inline-block改进（推荐）
改变display属性，就可以是块元素了，vertical-align: middle;设置垂直属性
优点：自适应内容
兼容：>=ie8 + 主流
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <style type="text/css"> 7 .div1{ 8 width: 500px;height: 500px; 9 background-color: blue; 10 text-align: center; 11 line-height: 500px; 12 } 13 .div2{ 14 display: inline-block; 15 vertical-align: middle; 16 width: 200px; 17 height: 200px; 18 background-color: red; 19 /*通过 line-hight 来垂直居中 此法>= ie8*/ 20 } 21 </style> 22 <body> 23 <div class="div1"> 24 <div class="div2"> 25 26 </div> 27 </div> 28 </body> 29 </html>
三、绝对定位
1.负margin
top，left 50%；margin -50%；
缺点：需固定宽高
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <style type="text/css"> 7 .div1{ 8 width: 500px;height: 500px; 9 background-color: blue; 10 position: relative; 11 } 12 .div2{ 13 position: absolute; 14 width: 200px; 15 height: 200px; 16 background-color: red; 17 top: 50%; 18 left: 50%; 19 margin-left: -100px; /*此处为width的一半，所以应用此法，元素必须固定宽、高*/ 20 margin-top: -100px; 21 22 } 23 </style> 24 <body> 25 <div class="div1"> 26 <div class="div2"> 27 fdsfsdffdf 28 fdsfdsfsdff 29 </div> 30 </div> 31 </body> 32 </html>
2.css3 translate
我们希望实现不固定宽高，在上法上改进。可以用js，动态添加宽高，但不推荐。其实可以用css3 translate属性，因为translate是唯一一个相对于自身宽度计算的属性
兼容：>=ie9 + 主流
优点：自适应内容
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <style type="text/css"> 7 .div1{ 8 width: 500px;height: 500px; 9 background-color: blue; 10 position: relative; 11 } 12 .div2{ 13 position: absolute; 14 background-color: red; 15 top: 50%; 16 left: 50%; 17 transform:translate(-50%,-50%); 18 /*应用css3 translate属性是相对于自身的，此法>=ie9，且宽高自适应*/ 19 } 20 </style> 21 <body> 22 <div class="div1"> 23 <div class="div2"> 24 fdsfsdffdf 25 fdsfdsfsdff 26 </div> 27 </div> 28 </body> 29 </html>
3.绝对定位 + 相对定位（推荐）
思想与上面的方式是一样，只是这是基于ie6,7的bug，相对定位位移父元素的50%
缺点：多添加一个容器标签
优点：自适应内容
兼容：ie6,7
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 .middle-demo-4{ 7 background-color: blue; 8 height: 300px; 9 width: 300px; 10 position: relative; 11 } 12 .middle-demo-4 div{ 13 position: absolute; 14 top: 50%; 15 left: 50%; 16 } 17 .middle-demo-4 div div{ 18 height: 200px; 19 background-color: red; 20 position: relative; 21 top: -50%; 22 left: -50%; 23 }/*ie6 ie7*/ 24 </style> 25 </head> 26 <body> 27 <div class="middle-demo-4"> 28 <div> 29 <div>dsfdsfdsfdsfdsfdsfdsf</div> 30 </div> 31 </div> 32 33 </body> 34 </html>
4.margin：auto
绝对定位下，固定宽高，top：0，bottom：0，会自适应内容，多余部分会用margin填充
缺点：固定宽高
兼容：>=ie8
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <style type="text/css"> 7 .div1{ 8 width: 500px;height: 500px; 9 background-color: blue; 10 position: relative; 11 } 12 .div2{ 13 margin: auto; 14 position: absolute; 15 background-color: red; 16 width: 200px; 17 height: 200px; 18 left: 0; 19 right: 0; 20 top: 0; 21 bottom: 0; 22 23 } 24 </style> 25 <body> 26 <div class="div1"> 27 <div class="div2"> 28 fdsfsdffdf 29 fdsfdsfsdff 30 </div> 31 </div> 32 </body> 33 </html>
四、表格
1.table-cell（推荐）
单元格可以设置垂直属性 vertical-align: middle;
优点：自适应内容
兼容：>=ie8 +主流
缺点：子元素为浮动、绝对定位无效（注意）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <style type="text/css"> 7 .div1{ 8 width: 500px;height: 500px; 9 background-color: blue; 10 display: table-cell; 11 vertical-align: middle; 12 text-align: center; 13 } 14 .div2{ 15 /*float: left;position: absolute; 子元素为浮动、绝对定位无效 16 此法>=ie8 17 */} 18 </style> 19 <body> 20 <div class="div1"> 21 <div class="div2"> 22 fdsfsdffdf 23 fdsfdsfsdff 24 </div> 25 </div> 26 </body> 27 </html>
五、总结
根据兼容性和自适应内容来考虑 表格/行高法 + 相对定位法
如果固定宽高 负margin法