如何在CSS中进行垂直+水平居中

Question

我经常想在另一个css框的垂直和水平方向居中。满足以下约束的最简单方法是什么？

• 盒子应该精确居中，而不是近似居中
• 该技术应该适用于现代浏览器和8以前的IE版本
• 该技术应该而不是依赖于明确知道居中内容或包含框的宽度或高度
• 我通常知道容器比内容大，但支持更大的内容（然后对称溢出）会很好
• 容器的底层内容必须仍然能够响应点击和悬停，除非被中心内容遮挡

我目前使用4（！）个嵌套的div来实现这一点，css如下：

.centering-1 {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    text-align:center;
    visibility:hidden;
}
.centering-2 { 
    height:100%; 
    display:inline-table; 
}
.centering-3 { 
    display:table-cell; 
    vertical-align:middle; 
}
.centering-content { 
    visibility:visible; 
}

您可以在操作中看到这是一个jsbin片段。然而，这种方法虽然可行，但由于大量的包装器div，感觉过于夸张，而且它不适用于比容器大的内容。如何在CSS中居中？

Answer 1

水平居中很容易：

.inner {
  width: 70%; /* Anything less than 100% */
  margin-left: auto;
  margin-right: auto;
}

但垂直居中有点棘手。现代浏览器最好的技术是将内联块和伪元素结合起来。这源于"幽灵元素"http://css-tricks.com/centering-in-the-unknown/.它设置添加一个伪元素，并使用内联块样式获取中心。CSS：

.outer { 
  height: 10rem; 
  text-align: center; 
  outline: dotted black 1px; 
}
.outer:before { 
  content: ''; 
  display: inline-block; 
  height: 100%; 
  vertical-align: middle;
}
.inner { 
  width: 10rem; 
  display: inline-block; 
  vertical-align: middle;
  outline: solid black 1px; 
}

Codepen上的一个示例：http://codepen.io/KatieK2/pen/ucwgi

---

对于更简单的情况，以下可能是不错的选择：

对于单行内容，您可以使用大于字体大小的行高在元素内的文本上进行快速而肮脏的垂直居中工作：

.inner { 
  border: 1px solid #666; 
  line-height: 200%;
}

支持范围最广的解决方案是使用非语义表。这适用于非常旧版本的IE，不需要JavaScript:

td.inner { 
  vertical-align: middle; 
}

对于已知的高度元素（可能是ems，而不是px），这里有一个简单的解决方案：

.outer { 
  position:relative; 
}
.inner { 
  position: absolute; 
  top:50%; 
  height:4em; 
  margin-top:-2em; 
  width: 50%; left: 25%; 
}

Answer 2

您可以少用2个元素。任何低于这一点的东西都需要IE8（和IE9）不支持的东西。

http://cssdeck.com/labs/0ltap96z

  <div class="centering-1">
    <div class="centering-2">
      <div class="intrinsically-sized-box">
        <p>You can put any content here too and the box will auto-size.</p>
      </div>
    </div>
  </div>

CSS：

body {max-width:750px;}
.generalblock {
  margin-top:2em; 
  position:relative;
  padding:10px;
  border:20px solid cyan;
  font-size: 18px;
}
.centering-1 {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  text-align:center;
  visibility:hidden;
  display: table;
  width: 100%;
}
.centering-2 {
  display:table-cell;
  vertical-align:middle;
}
.intrinsically-sized-box {
  visibility:visible;
  max-width:300px;
  margin: 0 auto;
  background: yellow; 
  position:relative;
  border:1px solid black;
}