我想用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的高度和父对象的高度是动态的。当同一父元素上有高于目标元素的其他元素时,我会使用它,因为这两个元素都位于水平内联位置。

其他回答

我这样做了(相应地改变宽度、高度、顶部边距和左侧边距):

.wrapper {
    width: 960px;
    height: 590px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -295px;
    margin-left: -480px;
}
<div class="wrapper"> -- Content -- </div>

通过使用transform属性,我们可以轻松地进行垂直居中的div。

.main分区{背景:无重复滚动0 0#999;字体大小:18px;高度:450px;最大宽度:850px;填充:15px;}.垂直中心{背景:无重复滚动0 0#1FA67A;颜色:#FFFFFF;填充:15px;位置:相对;顶部:50%;变换:translateY(-50%);-moz变换:translateY(-50%);-webkit转换:translateY(-50%);-ms变换:translateY(-50%);-o变换:translateY(-50%);}<div class=“main div”><div class=“垂直中心”><span>“Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incident ut labour et dolore magna aliqua。ut enim ad minim veniam,quis nostrud exerciation ullamco labours nisi ut aliquip ex a commo consequat。Duis aute irure dolor in representate velit esse cillum dolore eu fugiat nula pariator。例外情况下,在非政府组织的支持下,必须承担责任。”我正式任命了一位不称职的莫利特。“”</span></div></div>

请参阅此处了解全文

对于新手,请尝试:

display: flex;
align-items: center;
justify-content: center;

.中心{位置:绝对;顶部:50%;左:50%;转换:转换(-50%,-50%);/*(x,y)=>位置*/-ms转换:转换(-50%,-50%);/*即9*/-webkit转换:转换(-50%,-50%);/*Chrome、Safari、Opera*/}.垂直{位置:绝对;顶部:50%;//左:0;变换:平移(0,-50%);/*(x,y)=>位置*/}.水平{位置:绝对;//顶部:0;左:50%;变换:平移(-50%,0);/*(x,y)=>位置*/}第二部分{填充:1em;背景色:灰色;颜色:白色;} <body><div class=“vertical”>垂直向左</div><div class=“horizontal”>水平顶部</div><div class=“center”>垂直水平</div></body>

相关:居中图像

这是迄今为止最简单的方法,也适用于非阻塞元素。唯一的缺点是它是Flexbox,因此,较旧的浏览器将不支持此功能。

<div class="sweet-overlay">
    <img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />
</div>

指向CodePen的链接:

http://codepen.io/damianocel/pen/LNOdRp

这里重要的一点是,对于垂直居中,我们需要定义父元素(容器),并且img的高度必须小于父元素。