如何做垂直+；CSS中的水平定心

我经常会想将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; 
}

您可以看到。

---

然而，这种方法虽然可行，但由于包装器div的数量太多，感觉非常过分，而且它不适用于比容器大的内容。如何在CSS中居中？

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

---

水平定心很容易：

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

但是垂直居中有点棘手。现代浏览器的最佳技术是结合内联块和伪元素。这源于“鬼魂元素”，这是当时的最后一种技术。它设置并添加一个伪元素，并使用内联块样式获得居中。 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上的一个示例：

---

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

对于单行内容，您可以使用大于字体大小的行高对元素中的文本执行快速且不干净的垂直居中操作：

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

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

td.inner { 
  vertical-align: middle; 
}

下面是已知高度元素的简单解决方案（可以是

em

s，而不是

px

）：

---

为什么要使用未注释的向下投票呢？即使您不知道要居中的元素的宽度，也有很多方法用于水平对齐，但是垂直居中未知高度的元素要复杂得多。

display:table

和

display:table单元格

+

垂直对齐：中间

是最简单、最省事的纯CSS方法。不过，您可以简化CSS/HTML标记，而不需要5个嵌套div。在处理未知维度时，这实际上是不使用Javascript的主要方法。这个问题可能更适合@j08691，OP指定IE8。Internet Explorer在版本10之前不支持它。@FreshPrinceOfSO（和cimmanon）：我不想审查这段代码，我想在没有代码的情况下垂直+水平居中。另外，考虑到我经常遇到这个问题的变体，我希望这个问题的答案会对其他人有用-所以我不认为这是一个代码审查。这似乎不做垂直居中，至少，chrome+FF在容器顶部显示黄色框。这种鬼元素技术听起来很不错！嗯，但是它只在

.outer

元素具有显式高度时工作；这不是什么大问题，因为

.outer

可以绝对定位为100%宽度/高度。此外，为了避免出现奇怪的边缘情况，您似乎需要在内部框中添加一个最大大小（并使用

框大小调整

或无边框和填充），以确保容器小于内容时，您可以获得合理的行为，而不是完全混乱的布局。不过，这看起来真的很有希望！很好的奖励：如果你在

外部

和

内部

之间不留任何间隔，你就不需要使用hackish

边距右边：0.25em

如果有人想知道它是如何工作的，我已经把你的ghost元素技术放进去了。最后一个问题是：与许多

内联块

技巧一样，重要的是，

.outer

和

.inner

的开口标签之间没有空间，否则水平居中会稍微偏离。您的代码笔示例展示了这种不对称性；尝试使列几乎与

.internal

一样小，以查看它。这是一个容易犯的错误，值得一提。哦，而且不需要在

.outer

上填充。

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

td.inner { 
  vertical-align: middle; 
}

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