我想用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/
其他回答
最简单的方法是以下三行CSS：
1） 位置：相对；
2） 顶部：50%；
3） 变换：translateY（-50%）；
以下是一个示例：
外部配电盘{高度：170px；宽度：300px；背景色：浅灰色；}中间分隔符{位置：相对；顶部：50%；-webkit转换：translateY（-50%）；-ms变换：translateY（-50%）；变换：translateY（-50%）；}<div class='outer-div'><div class='middle-div'>测试文本</div></div>
我刚刚写了这篇CSS，想了解更多信息，请浏览：这篇文章用3行CSS垂直对齐任何内容。
.element {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
我觉得这个最有用。。。它给出了最准确的“H”布局，并且非常容易理解。
这种标记的好处是您可以在一个地方定义内容大小->“PageContent”。
页面背景的颜色及其水平边距在其相应的div中定义。
<div id="PageLayoutConfiguration"
style="display: table;
position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
width: 100%; height: 100%;">
<div id="PageBackground"
style="display: table-cell; vertical-align: middle;
background-color: purple;">
<div id="PageHorizontalMargins"
style="width: 100%;
background-color: seashell;">
<div id="PageContent"
style="width: 1200px; height: 620px; margin: 0 auto;
background-color: grey;">
My content goes here...
</div>
</div>
</div>
</div>
这里用CSS分隔：
<div id="PageLayoutConfiguration">
<div id="PageBackground">
<div id="PageHorizontalMargins">
<div id="PageContent">
my content goes here...
</div>
</div>
</div>
</div>
#PageLayoutConfiguration{
display: table;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#PageBackground{
display: table-cell;
vertical-align: middle;
background-color: purple;
}
#PageHorizontalMargins{
width: 100%;
background-color: seashell;
}
#PageContent{
width: 1200px;
height: 620px;
margin: 0 auto;
background-color: grey;
}
我只是找到了另一种对我有用的方法：
<div class="container">
<div class="vertical">
<h1>Welcome</h1>
<h2>Aligned Vertically</h2>
<a href="#">Click ME</a>
</div>
</div>
CSS
.vertical{
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
更多信息
这是迄今为止最简单的方法，也适用于非阻塞元素。唯一的缺点是它是Flexbox，因此，较旧的浏览器将不支持此功能。
<div class="sweet-overlay">
<img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />
</div>
指向CodePen的链接：
http://codepen.io/damianocel/pen/LNOdRp
这里重要的一点是，对于垂直居中，我们需要定义父元素（容器），并且img的高度必须小于父元素。
