如何在 div 块内居中文本（水平和垂直）？

如果它是一行文本和/或图像，那么很容易做到。只需使用：

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

而已。如果它可以是多行，那么它会更复杂一些。但在 http://pmob.co.uk/ 上有解决方案。寻找“垂直对齐”。

由于它们往往是黑客或添加复杂的 div... 我通常使用一个带有单个单元格的表格来完成它... 使其尽可能简单。

2020 年更新：

除非您需要让它在 Internet Explorer 10 等早期浏览器上运行，否则您可以使用 flexbox。它是 widely supported by all current major browsers。基本上，需要将容器指定为 flex 容器，并沿其主轴和交叉轴居中：

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

为孩子指定一个固定的宽度，称为“弹性项目”：

#content {
  flex: 0 0 120px;
}

示例：http://jsfiddle.net/2woqsef1/1/

要收缩包装内容，它更简单：只需从弹性项目中删除 flex: ... 行，它就会自动收缩包装。

示例：http://jsfiddle.net/2woqsef1/2/

上面的示例已经在包括 MS Edge 和 Internet Explorer 11 在内的主要浏览器上进行了测试。

如果您需要对其进行自定义，请提供一个技术说明：在 flex 项目内部，因为此 flex 项目本身不是 flex 容器，所以旧的非 flexbox 方式的 CSS 可以按预期工作。然而，如果你在当前的 flex 容器中添加一个额外的 flex 项，这两个 flex 项将被水平放置。要使它们垂直放置，请将 flex-direction: column; 添加到 flex 容器中。这就是 flex 容器和它的 immediate 子元素之间的工作方式。

还有另一种进行居中的方法：不为 flex 容器的主轴和交叉轴上的分布指定 center，而是在 flex 项目上指定 margin: auto 以占用所有四个方向上的所有额外空间，并且均匀分布的边距将使弹性项目在所有方向上居中。这有效，除非有多个弹性项目。此外，此技术适用于 MS Edge，但不适用于 Internet Explorer 11。

2016 / 2017 年更新：

它可以更常见地使用 transform 完成，即使在 Internet Explorer 10 和 Internet Explorer 11 等旧版浏览器中也能正常工作。它可以支持多行文本：

position: relative;
top: 50%;
transform: translateY(-50%);

示例：https://jsfiddle.net/wb8u02kL/1/

要收缩包装宽度：

上面的解决方案对内容区域使用了固定宽度。要使用收缩包装的宽度，请使用

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

示例：https://jsfiddle.net/wb8u02kL/2/

如果需要对 Internet Explorer 10 的支持，则 flexbox 将不起作用，而上面的方法和 line-height 方法将起作用。否则，flexbox 会完成这项工作。

---

截至 2014 年的常用技术：

方法 1 - 转换 translateX/translateY：此处示例 / 全屏示例 在支持的浏览器（大多数）中，您可以使用 top: 50%/left: 50% 与 translateX(-50%) translateY(-50%)动态垂直/水平居中元素。 .container { 位置：绝对；最高：50%；左：50%；变换：translateX(-50%) translateY(-50%); }

方法 2 - Flexbox 方法：此处示例 / 全屏示例 在支持的浏览器中，将目标元素的显示设置为 flex 并使用 align-items: center 垂直居中和 justify-content: center 水平居中。只是不要忘记添加供应商前缀以获得额外的浏览器支持（参见示例）。 html, body, .container { 高度: 100%; } .container { 显示：弹性；对齐项目：居中；证明内容：中心； }

方法 3 - table-cell/vertical-align: middle: Example Here / Full Screen Example 在某些情况下，您需要确保将 html/body 元素的高度设置为 100%。对于垂直对齐，将父元素的宽度/高度设置为 100% 并添加 display: table.然后对于子元素，将显示更改为表格单元格并添加垂直对齐：中间。对于水平居中，您可以添加 text-align: center 以使文本和任何其他内联子元素居中。或者，您可以使用 margin: 0 auto 假设元素是块级的。 html, 身体 { 高度：100%; } .parent { 宽度：100%;高度：100%；显示：表格；文本对齐：居中； } .parent > .child { 显示：表格单元格；垂直对齐：中间； }

方法 4 - 从顶部绝对定位 50% 并有位移：此处示例/全屏示例 此方法假定文本具有已知高度 - 在本例中为 18 像素。相对于父元素，将元素从顶部绝对定位 50%。使用元素已知高度的一半的负边距顶部值，在本例中为 -9px。 html, body, .container { 高度: 100%; } .container { 位置：相对；文本对齐：居中； } .container > p { 位置：绝对；最高：50%；左：0；右：0；边距顶部：-9px； }

方法 5 - line-height 方法（最不灵活 - 不建议）： 此处示例 在某些情况下，父元素将具有固定高度。对于垂直居中，您所要做的就是在子元素上设置一个等于父元素的固定高度的 line-height 值。尽管此解决方案在某些情况下会起作用，但值得注意的是，当有多行文本时它不会起作用 - 像这样。 .parent { 高度：200px;宽度：400px；文本对齐：居中； } .parent > .child { line-height: 200px; }

方法 4 和 5 不是最可靠的。选择前 3 个中的一个。

---

使用弹性盒/CSS：

<div class="box">
    <p>&#x0D05;</p>
</div>

CSS：

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

取自 Quick Tip: The Simplest Way To Center Elements Vertically And Horizontally

---

将行 display: table-cell; 添加到该 div 的 CSS 内容中。

只有表格单元格支持 vertical-align: middle;，但您可以将 [table-cell] 定义赋予 div...

这里有一个活生生的例子：http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

---

将此 CSS 类赋予目标