html - 如何集中div crossbrowser

Question

我想知道一种在 CSS 中将 div 居中的方法，而不依赖于设置 margin-top 和 down，用魔数(Magic Number)控制高度。

了解了所有这些缺点的表单，有好有坏，但都依赖于某些东西，并且希望为任何浏览器(至少 IE8+)提供永久解决方案。

我想水平和垂直集中一个没有神奇数字的 div 元素。其中 div 的高度自动计算动态增长并集中。

澄清一下，这是我不想要的例子。对于使用定义的宽度和高度没有灵 active ，必须使用 js 操纵添加到每个元素的高度。

http://jsfiddle.net/QsWfg/

<div id="container"></div>

#container { position: absolute; width: 380px; height: 360px; left: 50%; top:50%;      padding: 30px; margin-left: -220px; margin-top: -210px; background: #000; }

Answer 1

像这样？

Codepen 示例:http://cdpn.io/BuDLo

HTML

<div class='modal-overlay'>
  <div class='modal-box'></div>
</div>

CSS

.modal-overlay {
  background: black;
  bottom: 0;
  height: auto;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
}

.modal-box {
  background: white;
  bottom: 0;
  height: 200px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
}