我想用CSS垂直居中放置一个div。我不需要表或JavaScript，只需要纯CSS。我找到了一些解决方案，但都缺少Internet Explorer 6支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器（包括Internet Explorer 6）中垂直居中放置div？
当前回答
最简单的方法是以下三行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>
其他回答
Billbad的答案只适用于固定宽度的.intern除法。此解决方案通过将属性textalign:center添加到.outer div中来实现动态宽度。
.外部{位置：绝对；显示：表格；宽度：100%；高度：100%；文本对齐：居中；}.中间{显示：表格单元格；垂直对齐：中间；}.内部{文本对齐：居中；显示：内联块；宽度：自动；}<div class=“outer”><div class=“middle”><div class=“inner”>所容纳之物</div></div></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>
请参阅此处了解全文
当我不得不回到这个问题上时，这总是我要去的地方。
对于那些不想跳的人：
将父容器指定为位置：相对或位置：绝对。指定子容器上的固定高度。在子容器上设置位置：绝对和顶部：50%，以将顶部向下移动到父容器的中间。设置页边距上限：-yy，其中yy是子容器高度的一半，以向上偏移项目。
代码中的示例：
<style type="text/css">
#myoutercontainer {position:relative}
#myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
只需这样做：在div中添加类：
.modal {
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 240px;
}
请阅读本文以获得解释。注：高度是必需的。
这里有一个简单的方法，几乎没有代码：
CSS代码：
.main{
height: 100%;
}
.center{
top: 50%;
margin-top: 50%;
}
HTML代码：
<div class="main">
<div class="center">
Hi, I am centered!
</div>
</div>
您的文本将位于页面中间！
