我想用CSS垂直居中放置一个div。我不需要表或JavaScript,只需要纯CSS。我找到了一些解决方案,但都缺少Internet Explorer 6支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器(包括Internet Explorer 6)中垂直居中放置div?
我想用CSS垂直居中放置一个div。我不需要表或JavaScript,只需要纯CSS。我找到了一些解决方案,但都缺少Internet Explorer 6支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器(包括Internet Explorer 6)中垂直居中放置div?
当前回答
我认为,对于所有不使用Flexbox的浏览器来说,“alignitems:center;”是一种显示:表格和垂直对齐:中间;的组合;。
CSS
.vertically-center
{
display: table;
width: 100%; /* Optional */
height: 100%; /* Optional */
}
.vertically-center > div
{
display: table-cell;
vertical-align: middle;
}
HTML
<div class="vertically-center">
<div>
<div style="border: 1px solid black;">some text</div>
</div>
</div>
演示:https://jsfiddle.net/6m640rpp/
其他回答
这在我的情况下有效(仅在现代浏览器中测试):
.textthatneedstobecentered {
margin: auto;
top: 0; bottom: 0;
}
如果有人只关心Internet Explorer 10(及更高版本),请使用Flexbox:
.父级{宽度:500px;高度:500px;背景:黄色;显示:-webkit flex;显示:-ms flexbox;显示:柔性;-webkit调整内容:中心;-ms柔性包装:中心;对齐内容:中心;-webkit对齐项目:中心;-ms flex align:中心;对齐项目:居中;}.居中{宽度:100px;高度:100px;背景:蓝色;}<div class=“parent”><div class=“center”></div></div>
Flexbox支架:http://caniuse.com/flexbox
最好的做法是:
#vertalign{
height: 300px;
width: 300px;
position: absolute;
top: calc(50vh - 150px);
}
150像素,因为在本例中,这是div高度的一半。
现在,Flexbox解决方案是现代浏览器的一种非常简单的方式,因此我向您推荐:
.容器{显示:柔性;对齐项目:居中;对齐内容:中心;高度:100%;背景:绿色;}身体html格式{高度:100%;}<div class=“container”><div>div垂直对齐</div></div>
使用转换的三行代码实际上在现代浏览器和Internet Explorer上运行:
.element{
position: relative;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
我添加这个答案是因为我发现这个答案的前一个版本有些不完整(堆栈溢出不允许我简单地评论)。
如果当前div位于主体中且没有容器div,则“position”relative会破坏样式。然而,“fixed”似乎有效,但它显然会修复视口中心的内容此外,我使用这种样式对一些覆盖div进行了居中设置,并发现在Mozilla中,这个转换后的div中的所有元素都失去了底部边框。可能是渲染问题。但是,只在其中一些页面上添加最小的填充就可以正确地渲染。Chrome和Internet Explorer(令人惊讶)渲染了这些框,而不需要填充