我想用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?
当前回答
这在我的情况下有效(仅在现代浏览器中测试):
.textthatneedstobecentered {
margin: auto;
top: 0; bottom: 0;
}
其他回答
经过大量研究,我终于找到了最终的解决方案。它甚至适用于浮动元素。查看源
.element {
position: relative;
top: 50%;
transform: translateY(-50%); /* or try 50% */
}
最好的做法是:
#vertalign{
height: 300px;
width: 300px;
position: absolute;
top: calc(50vh - 150px);
}
150像素,因为在本例中,这是div高度的一半。
将元素垂直居中的现代方法是使用flexbox。
你需要父母来决定身高,孩子来居中。
下面的示例将使div在浏览器中居中。重要的是(在我的示例中)将height:100%设置为body和html,然后将min-height:100%设置到容器。
正文,html{背景:#F5F5F5;框大小调整:边框框;高度:100%;边距:0;}#中心容器{对齐项目:居中;显示:柔性;最小高度:100%;}#中心{背景:白色;边距:0自动;填充:10px;文本对齐:居中;宽度:200px;}<div id='center_container'>我是中心</分区></div>
我分享了一个简短的版本。
.first分区{显示:表格;位置:绝对;顶部:0;左:0;高度:100%;宽度:100%;}.firstDivision垂直中心{文本对齐:居中;显示:表格单元格;垂直对齐:中间;}<div class=“firstDivision”><div class=“verticalCenter”>垂直文本居中。</div></div>
CSS网格
正文,html{margin:0;}正文{显示:栅格;最小高度:100vh;对齐项目:居中;}<div>div垂直对齐</div>