我想用CSS将一个div
垂直居中。我不想要表格或JavaScript,只想要纯CSS。我找到了一些解决方案,但它们都缺少对Internet Explorer 6的支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有的主要浏览器(包括Internet Explorer 6)中使div
垂直居中?
下面是我能建立的最好的全方位的解决方案,可以将一个固定宽度、**灵活高度的内容框垂直和水平居中。它经过测试,在最近版本的Firefox、Opera、Chrome和Safari上都可以使用。
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/*whatever width you want*/
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
#container {
position: absolute;
top: 50%;
margin-top: -200px;
/* half of #content height*/
left: 0;
width: 100%;
}
#content {
width: 624px;
margin-left: auto;
margin-right: auto;
height: 395px;
border: 1px solid #000000;
}
<div id="container">
<div id="content">
<h1>Centered div</h1>
</div>
</div>