如何为所有浏览器垂直居中div？我想div用CSS垂直居中。我不想要表或JavaScript，只需要纯CSS。我找到了一些解决方案，但所有这些解决方案都缺少Internet Explorer 6支持。<body>
<div>Div to be aligned vertically</div></body>如何div在所有主流浏览器（包括Internet Explorer 6）中垂直居中？
4 回答
智慧大石
TA贡献1946条经验 获得超3个赞
下面是我可以构建的最佳全方位解决方案，可以垂直和水平居中固定宽度，灵活高度的内容盒。它已经过测试，适用于最新版本的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>
我内置了一些动态内容来测试灵活性，并且很想知道是否有人发现它有任何问题。它也适用于中心覆盖层 - 灯箱，弹出窗口等。
拉莫斯之舞
TA贡献1820条经验 获得超10个赞
我在列表中看不到一个：
.Center-Container {
position: relative;
height: 100%;}.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border: solid black;}跨浏览器（包括Internet Explorer 8 - 没有黑客的Internet Explorer 10！）
响应百分比和最小/最大 -
无论填充是否居中（没有盒子大小！）
height必须声明（见变量高度）建议的设置
overflow: auto以防止内容溢出（请参阅溢出）
元芳怎么了
TA贡献1798条经验 获得超7个赞
最简单的方法是以下3行 CSS：
position: relative;
top: 50%;
transform: translateY(-50%);
以下是一个例子：
div.outer-div {
height: 170px;
width: 300px;
background-color: lightgray;
}
div.middle-div {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
<div class='outer-div'>
<div class='middle-div'>
Test text
</div>
</div>
守候你守候我
TA贡献1802条经验 获得超10个赞
实际上你需要两个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>
添加回答
举报
0/150
提交
取消