我想用CSS垂直居中放置一个div。我不需要表或JavaScript，只需要纯CSS。我找到了一些解决方案，但都缺少Internet Explorer 6支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器（包括Internet Explorer 6）中垂直居中放置div？
当前回答
使用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;
}
其他回答
通过使用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>
请参阅此处了解全文
因为每次我需要垂直居中div时，我都会一遍又一遍地搜索它，这个答案总是首先出现的，所以我会把这个留给未来的我（因为提供的解决方案都不能很好地满足我的需求）：
因此，如果已经在使用引导程序，可以按如下方式进行：
<div style="min-height: 100vh;" class="align-items-center row">
<div class="col" style="margin: auto; max-width: 750px;"> //optional style to center horizontally as well
//content goes here
</div>
</div>
使用转换的三行代码实际上在现代浏览器和Internet Explorer上运行：
.element{
position: relative;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
我添加这个答案是因为我发现这个答案的前一个版本有些不完整（堆栈溢出不允许我简单地评论）。
如果当前div位于主体中且没有容器div，则“position”relative会破坏样式。然而，“fixed”似乎有效，但它显然会修复视口中心的内容此外，我使用这种样式对一些覆盖div进行了居中设置，并发现在Mozilla中，这个转换后的div中的所有元素都失去了底部边框。可能是渲染问题。但是，只在其中一些页面上添加最小的填充就可以正确地渲染。Chrome和Internet Explorer（令人惊讶）渲染了这些框，而不需要填充
最好的做法是：
#vertalign{
height: 300px;
width: 300px;
position: absolute;
top: calc(50vh - 150px);
}
150像素，因为在本例中，这是div高度的一半。
如果有人只关心Internet Explorer 10（及更高版本），请使用Flexbox：
.父级{宽度：500px；高度：500px；背景：黄色；显示：-webkit flex；显示：-ms flexbox；显示：柔性；-webkit调整内容：中心；-ms柔性包装：中心；对齐内容：中心；-webkit对齐项目：中心；-ms flex align:中心；对齐项目：居中；}.居中{宽度：100px；高度：100px；背景：蓝色；}<div class=“parent”><div class=“center”></div></div>
Flexbox支架：http://caniuse.com/flexbox
