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

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 element”，这是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%; 
}