如何为所有浏览器垂直居中 div？

我想用 CSS 垂直居中一个div 。我不想要表或 JavaScript，只需要纯 CSS。我找到了一些解决方案，但所有这些解决方案都缺少 Internet Explorer 6 支持。

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

如何在所有主流浏览器中垂直居中div ，包括 Internet Explorer 6？

下面是我可以构建的最佳全方位解决方案，可以垂直和水平居中固定宽度， 灵活高度的内容盒。它已经过测试，适用于最新版本的 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>

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

我内置了一些动态内容来测试灵活性，并且很想知道是否有人发现它有任何问题。它也适用于中心覆盖层 - 灯箱，弹出窗口等。

我在列表中看不到一个：

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}

跨浏览器（包括 Internet Explorer 8 - 没有黑客的 Internet Explorer 10！）
响应百分比和最小 / 最大 -
无论填充是否居中（没有盒子大小！）
必须声明height （参见变量高度）
推荐设置overflow: auto防止内容溢出（请参阅溢出）

_{来源： CSS 中的绝对水平和垂直居中}

最简单的方法是以下3 行 CSS：

position: relative;
top: 50%;
transform: translateY(-50%);

以下是一个例子：

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

协慌网

如何为所有浏览器垂直居中 div？

答案