我想用CSS垂直居中放置一个div。我不需要表或JavaScript，只需要纯CSS。我找到了一些解决方案，但都缺少Internet Explorer 6支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器（包括Internet Explorer 6）中垂直居中放置div？
当前回答
可以通过两种方式实现
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时，我都会一遍又一遍地搜索它，这个答案总是首先出现的，所以我会把这个留给未来的我（因为提供的解决方案都不能很好地满足我的需求）：
因此，如果已经在使用引导程序，可以按如下方式进行：
<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 6）中的框，可以使用：
有条件的评论haslayout属性显示：其他表值（现在为flex）
不停摆弄
/*Internet Explorer 8和其他*/.主要{宽度：500px；边距：自动；边框：实心；}html格式{高度：100%；宽度：100%；显示：表格；}正文{显示：表格单元格；垂直对齐：中间；}<!-- [如果lte IE 7]><style>/*应该在<head>中*/html，正文，.ie{高度：100%；文本对齐：居中；空白：nowrap；}例如，.main{显示：内联；/*在使用块元素而不是内联元素时与缩放一起使用*/缩放：1；垂直对齐：中间；文本对齐：左侧；空白：正常；}</style><b class=“ie”></b><!--[endif]--><div class=“main”><p>用你的内容填满它</p><p><a href=“https://jsfiddle.net/h8z24s5v/embedded/result/“>JsFiddle版本</a></p></div>
实际上，InternetExplorer7在这里会带来一些麻烦，因为它是唯一严格应用高度的浏览器：100%应用于HTML/body元素。
但是，这是过去和现在的事了，谁还记得旧版本的Internet Explorer，表/表单元格很好，display:flex很有前途，display:grid总有一天会出现。
现在通过flex的另一个示例
html格式{显示：柔性；最小高度：100vh；/*或高度*/}正文{边距：自动；}<div>div垂直对齐</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>
我最近发现了一个技巧：你需要使用前50%，然后再进行translateY（-50%）。
.外部div{位置：相对；高度：150px；宽度：150px；背景色：红色；}.居中div{位置：绝对；顶部：50%；-webkit转换：translateY（-50%）；-ms变换：translateY（-50%）；变换：translateY（-50%）；背景色：白色；}<div class='outer-div'><div class='entered-div'>测试文本</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代码演示
