我想用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;
}
其他回答
这在我的情况下有效(仅在现代浏览器中测试):
.textthatneedstobecentered {
margin: auto;
top: 0; bottom: 0;
}
现在,Flexbox解决方案是现代浏览器的一种非常简单的方式,因此我向您推荐:
.容器{显示:柔性;对齐项目:居中;对齐内容:中心;高度:100%;背景:绿色;}身体html格式{高度:100%;}<div class=“container”><div>div垂直对齐</div></div>
以下是我的案例,并在Firefox中进行了测试。
#element {
display: block;
transform: translateY(50%);
-moz-transform: translateY(50%);
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
}
div的高度和父对象的高度是动态的。当同一父元素上有高于目标元素的其他元素时,我会使用它,因为这两个元素都位于水平内联位置。
将元素垂直居中的现代方法是使用flexbox。
你需要父母来决定身高,孩子来居中。
下面的示例将使div在浏览器中居中。重要的是(在我的示例中)将height:100%设置为body和html,然后将min-height:100%设置到容器。
正文,html{背景:#F5F5F5;框大小调整:边框框;高度:100%;边距:0;}#中心容器{对齐项目:居中;显示:柔性;最小高度:100%;}#中心{背景:白色;边距:0自动;填充:10px;文本对齐:居中;宽度:200px;}<div id='center_container'>我是中心</分区></div>
特别是对于具有相对(未知)高度的父div,未知解决方案中的居中对我来说非常有用。
它在Chrome、Firefox、Opera和Internet Explorer中进行了测试。
/*此父项可以是任何宽度和高度*/.块{文本对齐:居中;}/*鬼魂被推着保持完美的居中*/.block:之前{内容:“”;显示:内联块;高度:100%;垂直对齐:中间;右边距:-0.25em;/*调整间距*/}/*要居中的元素可以也可以是任何宽度和高度*/.居中{显示:内联块;垂直对齐:中间;宽度:300px;}<div style=“width:400px;height:200px;”><div class=“block”style=“高度:90%;宽度:100%”><div class=“center”><h1>一些文本</h1><p>任何其他文本。。。“”</p></div></div></div>