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

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

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

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

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

1）职位：相对；

2）最高：50％；

3）转换：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 才能进行垂直居中。包含内容的 div 必须具有宽度和高度。

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}

<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

这是结果

现在，对于现代浏览器来说，flexbox 解决方案是一种非常简单的方法，因此我为您推荐：

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}

<div class="container">
    <div>Div to be aligned vertically</div>
</div>

这是我找到的最简单的方法，我一直都在使用它（ jsFiddle 演示）

感谢 CSS Tricks 的 Chris Coyier 撰写本文。

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}

<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

支持始于 IE8。

经过大量研究，我终于找到了最终的解决方案。它甚至适用于浮动元素。查看资料

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

要将 div 置于页面中心，请选中小提琴链接。

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id="vh" class="box">Div to be aligned vertically</div>

另一个选择是使用 flex 框，检查小提琴链接。

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

另一个选择是使用 CSS 3 转换：

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id="vh" class="box">Div to be aligned vertically</div>

Flexbox 解决方案

笔记
1. 给父元素一个类名。
2. 如果支持的浏览器需要，请添加弹性厂商前缀。

.verticallyCenter {
  display: flex;
  align-items: center;
}

<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>

最简单的解决方案如下：

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}

<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

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

答案

Flexbox 解决方案