html - 如何集中 div 跨浏览器

Question

我想知道 CSS 中的一种方法，可以在不依赖设置边距顶部和向下的情况下将 div 居中，用幻数控制高度。

学习了所有这些缺点的表单，有些好坏，但都依赖于某些东西，并且希望永久解决任何浏览器（至少 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;
}