下面是我可以构建的最好的全方位解决方案，用于垂直和水平居中固定宽度、灵活高度的内容框。它已经过测试并适用于最新版本的 Firefox、Opera、Chrome 和 Safari。

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

查看具有动态内容的工作示例

我内置了一些动态内容来测试灵活性，并且很想知道是否有人发现它有任何问题。它也应该适用于居中的叠加层——灯箱、弹出窗口等。