我想用CSS垂直居中放置一个div。我不需要表或JavaScript，只需要纯CSS。我找到了一些解决方案，但都缺少Internet Explorer 6支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器（包括Internet Explorer 6）中垂直居中放置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
其他回答
Billbad的答案只适用于固定宽度的.intern除法。此解决方案通过将属性textalign:center添加到.outer div中来实现动态宽度。
.外部{位置：绝对；显示：表格；宽度：100%；高度：100%；文本对齐：居中；}.中间{显示：表格单元格；垂直对齐：中间；}.内部{文本对齐：居中；显示：内联块；宽度：自动；}<div class=“outer”><div class=“middle”><div class=“inner”>所容纳之物</div></div></div>
我只是找到了另一种对我有用的方法：
<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%);
}
更多信息
可以通过两种方式实现
body{
left: 50%;
top:50%;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
}
OR
使用flex
body {
height:100%
width:100%
display: flex;
justify-content: center;
align-items: center;
}
对齐项目：居中；使内容垂直居中
对齐内容：中心；使内容水平居中
这个解决方案适用于块元素（例如，＜div＞）。我用颜色使溶液更清晰。
HTML格式：
<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>
CSS:
main {
position: relative;
width: 400px;
height: 400px;
}
.skin_orange {
outline: thin dotted red;
background: orange;
}
.bigBox {
width: 150px;
height: 150px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.skin_blue {
background-color: blue;
}
JSFiddle代码演示
以下是我的案例，并在Firefox中进行了测试。
#element {
display: block;
transform: translateY(50%);
-moz-transform: translateY(50%);
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
}
div的高度和父对象的高度是动态的。当同一父元素上有高于目标元素的其他元素时，我会使用它，因为这两个元素都位于水平内联位置。
