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

Z时代
2024-01-10
分类：问答

我想将divCSS垂直居中放置。我不需要表或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>