如何在CSS中进行Vertical+Horizontal对中

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; 
}

你可以看到这在作为jsbin代码段的实际操作中。。然而，这种方法虽然可行，但由于包装器div的数量太多，它感觉非常过分，而且它不能处理比容器更大的内容。我如何在CSS中居中？

Answer 1

水平对中容易：

.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%; 
}

Answer 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;
}