我想用CSS垂直居中放置一个div。我不需要表或JavaScript，只需要纯CSS。我找到了一些解决方案，但都缺少Internet Explorer 6支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器（包括Internet Explorer 6）中垂直居中放置div？
当前回答
不幸的是，但并不令人惊讶的是，解决方案比人们希望的更复杂。同样不幸的是你需要在垂直居中的div周围使用额外的div。
对于符合标准的浏览器，如Mozilla、Opera、Safari等，您需要将外部div设置为显示为表，将内部div设置为表单元格-然后可以垂直居中。对于InternetExplorer，您需要将内部div绝对放置在外部div中，然后将顶部指定为50%。以下页面很好地解释了这一技术，并提供了一些代码示例：
CSS中的垂直居中未知高度的CSS垂直居中（兼容Internet Explorer 7）（Wayback Machine提供的存档文章）
还有一种使用JavaScript进行垂直居中的技术。内容与JavaScript和CSS的垂直对齐演示了这一点。
其他回答
.中心{位置：绝对；顶部：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解决方案是现代浏览器的一种非常简单的方式，因此我向您推荐：
.容器{显示：柔性；对齐项目：居中；对齐内容：中心；高度：100%；背景：绿色；}身体html格式{高度：100%；}<div class=“container”><div>div垂直对齐</div></div>
要使div在页面上居中，请选中fiddle链接。
#甚高频{边距：自动；位置：绝对；顶部：0；左：0；底部：0；右：0；}.box格式{边框半径：15px；方框阴影：0 0 8px rgba（0，0，0、0.4）；填充：25px；宽度：100px；高度：100px；背景：白色；}<div id=“vh”class=“box”>div垂直对齐</div>
另一种选择是使用flex框，选中fiddle链接。
.vh文件{背景色：#ddd；高度：400px；对齐项目：居中；显示：柔性；}.vh>div{宽度：100%；文本对齐：居中；垂直对齐：中间；}<div class=“vh”><div>div垂直对齐</div></div>
另一种选择是使用CSS 3转换：
#甚高频{位置：绝对；顶部：50%；左：50%；/*变换：translateX（-50%）translateY（-50%）*/转换：转换（-50%，-50%）；}.box格式{边框半径：15px；方框阴影：0 0 8px rgba（0，0，0、0.4）；填充：25px；宽度：100px；高度：100px；背景：白色；}<div id=“vh”class=“box”>div垂直对齐</div>
这个解决方案适用于块元素（例如，＜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代码演示
不回答浏览器兼容性，但也要提到新的网格和不那么新的Flexbox功能。
Grid
来自：Mozilla-网格文档-垂直对齐Div
浏览器支持：网格浏览器支持
CSS:
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-auto-rows: 200px;
grid-template-areas:
". a a ."
". a a .";
}
.item1 {
grid-area: a;
align-self: center;
justify-self: center;
}
HTML格式：
<div class="wrapper">
<div class="item1">Item 1</div>
</div>
柔性包装箱
浏览器支持：Flexbox浏览器支持
CSS:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
