我们都知道 margin:0 auto; 的样式能让元素水平居中，而 margin: auto; 却不能做到垂直居中……直到现在。
transform法
和“完全居中”法的好处一样，简单有效，同时支持可变高度。为内容指定带有厂商前缀的transform: translate(-50%,-50%)和top: 50%; left: 50%;样式就可以让内容块居中。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .parent{width:200px;height:200px;background-color:#00FFFF;} 8 .child{ 9 position:relative;top:50%;left:50%; 10 height:100px;width:100px; 11 background-color:red; 12 -webkit-transform:translate(-50%,-50%); 13 -moz-transform:translate(-50%,-50%); 14 -ms-transform:translate(-50%,-50%); 15 -o-transform:translate(-50%,-50%); 16 transform:translate(-50%,-50%); 17 } 18 </style> 19 </head> 20 <body> 21 <div class="parent"> 22 <div class="child"></div> 23 </div> 24 注意: <br> 25 好处:内容高度可变,并且代码量小<br> 26 缺点:不支持 IE8 需要些产商前缀 会和其他transform样式有冲突 某些情况下的边缘和字体渲染会有问题<br> 27 </body> 28 </html>
好处：
- 内容高度可变
- 代码量小
同时注意：
- 不支持IE8
- 需要写厂商前缀
- 会和其他transform样式有冲突
- 某些情况下的边缘和字体渲染会有问题
table-cell法
这种可能是最好的方法，因为高度可以随内容改变，浏览器支持也不差。主要缺陷是会产生额外的标签，每一个需要居中的元素需要三个额外的HTML标签。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>table-cell方法</title> 6 <style type="text/css"> 7 .Center-Container.is-Table{display:table;} 8 .is-Table .Table-Cell{display:table-cell;vertical-align:middle;} 9 .is-Table .Center-Block{width:50%;margin:0 auto;} 10 </style> 11 </head> 12 <body> 13 <div class="Center-Container is-Table"> 14 <div class="Table-Cell"> 15 <div class="Center-Block"> 16 table-cell方法:<br/> 17 优点:内容高度可变 内容溢出则能自动撑开父元素高度 浏览器兼容性好<br/> 18 缺点:需要额外的 HTML 标签 <br/> 19 </div> 20 </div> 21 </div> 22 </body> 23 </html>
好处：
- 内容高度可变
- 内容溢出则能自动撑开父元素高度
- 浏览器兼容性好
同时注意：
- 需要额外的HTML标签