我想用CSS垂直居中放置一个div。我不需要表或JavaScript，只需要纯CSS。我找到了一些解决方案，但都缺少Internet Explorer 6支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器（包括Internet Explorer 6）中垂直居中放置div？
当前回答
居中是CSS最困难的方面之一。
这些方法本身通常不难理解。相反，这更多是因为有很多方法可以将事情集中起来。
您使用的方法可能会有所不同，这取决于您试图居中的HTML元素，或者是水平居中还是垂直居中。
水平居中
水平对中元件通常比垂直对中元件更容易。下面是一些常见的元素，您可能希望水平居中，以及不同的方法。
使用CSS文本居中属性居中文本
要使文本或链接水平居中，只需使用文本对齐属性和值中心：
HTML
<div class="container">
<p>Hello, (centered) World!</p>
</div>
CSS
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
}
p {
/* Center horizontally*/
text-align: center;
}
使用CSS边距自动居中分隔
使用值为0的速记边距属性，自动将块级元素（如div）水平居中：
HTML
<div class="container">
<div class="child"></div>
</div>
CSS
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center horizontally*/
margin: 0 auto;
}
使用Flexbox水平居中跳水
Flexbox是在页面上居中的最现代的方式，它使设计响应式布局比以前容易得多。然而，它在一些传统浏览器（如Internet Explorer）中并不完全受支持。
要使用Flexbox水平居中元素，只需将display：flex和justify content：center应用于父元素：
HTML
<div class="container">
<div class="child"></div>
</div>
CSS
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Center child horizontally*/
display: flex;
justify-content: center;
}
.child {
width: 50px;
height: 50px;
background-color: red;
}
垂直居中
如果没有像Flexbox这样的现代方法，将元素垂直居中可能是一件很麻烦的事。在这里，我们将介绍一些较旧的方法，首先垂直居中，然后向您展示如何使用Flexbox实现这一点。
如何使用CSS绝对定位和负边距使Div垂直居中
在很长一段时间里，这是垂直居中的常用方法。对于此方法，必须知道要居中的元素的高度。
首先，将父元素的position属性设置为relative。
然后，对于子元素，将position属性设置为absolute，并将top设置为50%：
HTML
<div class="container">
<div class="child"></div>
</div>
CSS
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Setup */
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically */
position: absolute;
top: 50%;
}
但这实际上只是将子元素的顶部边缘垂直居中。
要使子元素真正居中，请将margin-top属性设置为-（子元素高度的一半）：
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Setup */
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically */
position: absolute;
top: 50%;
margin-top: -25px; /* Half this element's height */
}
使用变换和平移使Div垂直居中
如果您不知道要居中的元素的高度（或者即使您知道），这个方法是一个很好的技巧。
该方法与上述负边距方法非常相似。将父元素的位置属性设置为相对。
对于子元素，将position属性设置为absolute，并将top设置为50%。现在，不要使用负边距来真正居中子元素，只需使用transform:translate（0，-50%）：
HTML
<div class="container">
<div class="child"></div>
</div>
CSS
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Setup */
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically */
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
请注意，translate（0，-50%）是translateX（0）和translateY（-50%）的简写。您还可以编写transform:translateY（-50%）以垂直居中子元素。
垂直和水平居中
使用CSS绝对定位和负边距使Div垂直和水平居中
这与上述垂直居中元素的方法非常相似。和上次一样，您必须知道要居中的元素的宽度和高度。
将父元素的位置属性设置为相对。
然后将孩子的位置属性设置为绝对，顶部设置为50%，左侧设置为50%。这只会使子元素的左上角垂直和水平居中。
要使子元素真正居中，请将负上边距设置为子元素高度的一半，将负左边距设置为子元素宽度的一半：
HTML
<div class="container">
<div class="child"></div>
</div>
CSS
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Setup */
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically and horizontally */
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px; /* Apply negative top and left margins to truly center the element */
}
其他回答
要垂直对齐网页（包括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>
使用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;
}
我最近发现了一个技巧：你需要使用前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代码演示
将元素垂直居中的现代方法是使用flexbox。
你需要父母来决定身高，孩子来居中。
下面的示例将使div在浏览器中居中。重要的是（在我的示例中）将height:100%设置为body和html，然后将min-height:100%设置到容器。
正文，html{背景：#F5F5F5；框大小调整：边框框；高度：100%；边距：0；}#中心容器{对齐项目：居中；显示：柔性；最小高度：100%；}#中心{背景：白色；边距：0自动；填充：10px；文本对齐：居中；宽度：200px；}<div id='center_container'>我是中心</分区></div>
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 右对齐文本在android TextView
- 相对定位一个元素，而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
