如何集中 div 跨浏览器

Question

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

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

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

为了澄清，这是我不想要的一个例子。使用 widht 和 height 定义没有灵活性，并且必须使用 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;
}