如何使用 CSS 为所有浏览器垂直居中 div 元素

发布于05月31日

我想用CSS将div垂直居中.我不想要表格或JavaScript，只想要纯CSS.我找到了一些解决方案，但它们都缺少对Internet Explorer 6的支持.

<body>
    <div>Div to be aligned vertically</div>
</body>

如何在所有主要浏览器(包括Internet Explorer6)中将div垂直居中？

推荐答案

下面是我所能构建的最好的全能解决方案，用于垂直和水平居中放置固定宽度的flexible height个内容框.它已经在最新版本的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>

View A Working Example With Dynamic Content个

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