我想用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?
当前回答
以下是我的案例,并在Firefox中进行了测试。
#element {
display: block;
transform: translateY(50%);
-moz-transform: translateY(50%);
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
}
div的高度和父对象的高度是动态的。当同一父元素上有高于目标元素的其他元素时,我会使用它,因为这两个元素都位于水平内联位置。
其他回答
这是迄今为止最简单的方法,也适用于非阻塞元素。唯一的缺点是它是Flexbox,因此,较旧的浏览器将不支持此功能。
<div class="sweet-overlay">
<img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />
</div>
指向CodePen的链接:
http://codepen.io/damianocel/pen/LNOdRp
这里重要的一点是,对于垂直居中,我们需要定义父元素(容器),并且img的高度必须小于父元素。
我这样做了(相应地改变宽度、高度、顶部边距和左侧边距):
.wrapper {
width: 960px;
height: 590px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -295px;
margin-left: -480px;
}
<div class="wrapper"> -- Content -- </div>
对于新手,请尝试:
display: flex;
align-items: center;
justify-content: center;
使用Flexbox可以轻松将内容居中。以下代码显示了容器的CSS,其中的内容需要居中:
.absolute-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
此方法不使用任何变换。因此,输出变得模糊没有问题。
position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;