我想用CSS垂直居中放置一个div。我不需要表或JavaScript，只需要纯CSS。我找到了一些解决方案，但都缺少Internet Explorer 6支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器（包括Internet Explorer 6）中垂直居中放置div？
当前回答
经过大量研究，我终于找到了最终的解决方案。它甚至适用于浮动元素。查看源
.element {
position: relative;
top: 50%;
transform: translateY(-50%); /* or try 50% */
}
其他回答
我觉得这个最有用。。。它给出了最准确的“H”布局，并且非常容易理解。
这种标记的好处是您可以在一个地方定义内容大小->“PageContent”。
页面背景的颜色及其水平边距在其相应的div中定义。
<div id="PageLayoutConfiguration"
style="display: table;
position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
width: 100%; height: 100%;">
<div id="PageBackground"
style="display: table-cell; vertical-align: middle;
background-color: purple;">
<div id="PageHorizontalMargins"
style="width: 100%;
background-color: seashell;">
<div id="PageContent"
style="width: 1200px; height: 620px; margin: 0 auto;
background-color: grey;">
My content goes here...
</div>
</div>
</div>
</div>
这里用CSS分隔：
<div id="PageLayoutConfiguration">
<div id="PageBackground">
<div id="PageHorizontalMargins">
<div id="PageContent">
my content goes here...
</div>
</div>
</div>
</div>
#PageLayoutConfiguration{
display: table;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#PageBackground{
display: table-cell;
vertical-align: middle;
background-color: purple;
}
#PageHorizontalMargins{
width: 100%;
background-color: seashell;
}
#PageContent{
width: 1200px;
height: 620px;
margin: 0 auto;
background-color: grey;
}
此方法不使用任何变换。因此，输出变得模糊没有问题。
position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;
我只是找到了另一种对我有用的方法：
<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%);
}
更多信息
仅垂直居中
如果您不关心InternetExplorer6和7，可以使用包含两个容器的技术。
外部容器：
应具有显示：table；
内部容器：
应具有显示：表格单元格；应垂直对齐：中间；
内容框：
应该有显示：inline块；
您可以将任何内容添加到内容框中，而不必考虑其宽度或高度！
演示：
正文{边距：0；}.外部容器{位置：绝对；显示：表格；宽度：100%；/*这可以是任意宽度*/高度：100%；/*这可能是任何高度*/背景：#ccc；}.内部容器{显示：表格单元格；垂直对齐：中间；}.居中内容{显示：内联块；背景：#fff；填充：20px；边框：1px实心#000；}<div class=“outer container”><div class=“内部容器”><div class=“居中内容”>马尔科姆在中间</div></div></div>
另请参见此Fiddle！
水平和垂直居中
如果要水平和垂直居中，还需要以下内容。
内部容器：
文本应对齐：居中；
内容框：
应重新调整水平文本对齐方式，例如文本对齐方式：左对齐；或文本对齐：右；，除非您希望文本居中
演示：
正文{边距：0；}.外部容器{位置：绝对；显示：表格；宽度：100%；/*这可以是任意宽度*/高度：100%；/*这可能是任何高度*/背景：#ccc；}.内部容器{显示：表格单元格；垂直对齐：中间；文本对齐：居中；}.居中内容{显示：内联块；文本对齐：左侧；背景：#fff；填充：20px；边框：1px实心#000；}<div class=“outer container”><div class=“内部容器”><div class=“居中内容”>马尔科姆在中间</div></div></div>
另请参见此Fiddle！
.中心{位置：绝对；顶部：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>
相关：居中图像
