Question

我经常想要将css盒在垂直和水平方向中心放在另一个中心。满足以下约束条件的最简单方法是什么？

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

我目前使用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; 
}

您可以看到 this in action as a jsbin snippet 。然而，这种方法虽然可行，但由于包装div的数量很多而感觉极端矫枉过正，并且它不适用于比容器大的内容。我如何在CSS中居中？

Answer 1

你可以减少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;
}

Answer 2

水平居中很容易：

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

但垂直居中有点棘手。现代浏览器的最佳技术是组合内联块和伪元素。这源于“Ghost元素”，这是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; 
}

以下是已知高度元素的简单解决方案（可以在em中，而不是px）：

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

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

2 个答案: