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

小编典典

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

css

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

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

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

阅读 406

2020-05-16

共1个答案

小编典典

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

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

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

2020-05-16