DIV居中垂直使用CSS的最佳方式
来源：luqidong
发布时间：2014-01-23 20:17:07
点击数：
问题：我想垂直居中一个div的CSS。我不想表或Javascript，但只有纯CSS。我发现了一些解决方案，但他们都缺少的Internet Explorer 6的支持。
<body>
<div>Div to be aligned vertically</div>
</body>
下面是最全面的解决方案，我可以建立垂直和水平居中固定宽度，高度灵活的内容框。测试工作FF, Opera, Chrome, & Safari,浏览器，MSIE6+的版本。
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: /*whatever width you want*/;
}
为了适应IE 7浏览器和旧的，用一个单独的样式表与这些变化：
.outer {
display: inline-block;
top: 0;
}
.middle {
display: inline-block;
top: 50%;
position: relative;
}
.inner {
display: inline-block;
top: -50%;
position: relative;
}
案例demo
