问题:我想垂直居中一个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