如何将所有浏览器的div垂直居中？
我想用CSS将div垂直居中。 我不需要表或JavaScript，而只需要纯CSS。 我找到了一些解决方案，但是所有这些解决方案都缺少Internet Explorer 6支持。
<body><div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器（包括Internet Explorer 6）中垂直居中放置div ？
#1楼
我这样做（相应地更改宽度，高度，边距顶部和边距左侧）：
.wrapper {width:960px;height:590px;position:absolute;top:50%;left:50%;margin-top:-295px;margin-left:-480px;
}<div class="wrapper"> -- Content -- </div>
#2楼
我发现这是最有用的..它提供了最准确的“ 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{style="width: 100%;background-color: seashell;
}
#PageContent{width: 1200px; height: 620px; margin: 0 auto;background-color: grey;
}
#3楼
我在清单上看不到的另一个：
.Center-Container {position: relative;height: 100%;
}.Absolute-Center {width: 50%;height: 50%;overflow: auto;margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;border: solid black;
}
- 跨浏览器（包括Internet Explorer 8-不带黑客的Internet Explorer 10！）
- 响应百分比和最小/最大-
- 居中而不考虑填充（无框大小！）
- 必须声明
height（请参见可变高度 ） - 推荐的设置
overflow: auto以防止内容溢出（请参见溢出）
来源： CSS中的绝对水平和垂直居中
#4楼
要将div置于页面中心， 请选中小提琴链接 。
#vh { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .box{ border-radius: 15px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); padding: 25px; width: 100px; height: 100px; background: white; } <div id="vh" class="box">Div to be aligned vertically</div>