div中的中心文本？答案

【问题标题】：Center text in div?div中的中心文本？
【发布时间】：2011-08-28 15:56:49
【问题描述】：

我有一个div 30px 高和500px 宽。这个div 可以包含两行文本，一个在另一个之下，并相应地设置样式（填充）。但有时它只包含一行，我希望它居中。这可能吗？

【问题讨论】：

从上到下、从右到左或两者居中？
CSS center text (horizontally and vertically) inside a div block的可能重复

【解决方案1】：

我可能在这里遗漏了一些东西，但你试过了吗：

text-align:center;

??

【讨论】：

两行没问题，但第一行后面的差距太大
仅水平居中。这个问题似乎暗示 OP 想要垂直居中。

【解决方案2】：

您可以尝试在 CSS 中使用属性 vertical-align 以使其垂直居中

div {  
    vertical-align:middle;  
}

如果是大小问题，请注意 2 个文本行和一个 padding 样式有很大的机会具有超过 30px 的高度。

例如，如果您的字体大小为 12 像素，而您的 div 内边距为 5 像素，则一个文本行的 div 高度将为 5px (padding-top) + 12px + 5 px (padding-bottom) = 22px

使用 2 个文本行的 div，它将是 5px +12px *2（2 行）+ 5px = 34px > 30px，并且您的 div 高度将自动更改。

尝试增加您的 div 高度（可能是 40 像素）或减少您的内边距。

希望对你有帮助

【讨论】：

【解决方案3】：

这对你有用吗？

div { text-align: center; }

【讨论】：

【解决方案4】：

我相信您希望文本在您的 div 中垂直居中，而不是（仅）水平居中。我知道这样做的唯一可靠方法是使用：

display: table-cell;
vertical-align: middle;

在您的 div 上，它适用于任意数量的行。你可以在这里看到一个测试：http://jsfiddle.net/qMtZV/1/

请务必检查浏览器是否支持此属性，因为它不受支持 - 例如 - 在 IE7 或更早版本中。

2016 年 2 月 10 日更新

五年后这种技术仍然有效，但我相信有更好、更可靠的解决方案来解决这个问题。由于Flexbox 支持现在很好，您可能想要按照以下方式做一些事情：http://codepen.io/michelegera/pen/gPZpqE。

【讨论】：

注意：这要求<div>设置为position: relative;。
@JamieBirch 它应该设置为relative 或static 的（默认）值。当位置为absolute 或fixed 时，它不会居中。

【解决方案5】：

要水平居中，请使用text-align:center。

要垂直居中，只有在同一行中有另一个元素与之对齐时，才能使用vertical-align:middle。
看到它工作here。

我们使用一个高度为 100% 的空 span，然后将内容放在带有 vertical-align:middle 的下一个元素中。

还有其他技术，例如使用表格单元格或将内容放在绝对定位的元素中，顶部、底部、左侧和右侧都设置为零，但它们都存在跨浏览器兼容性问题。

【讨论】：

提供的示例中的“vertical-align: middle”无效。这是使文本居中的跨度的行高

【解决方案6】：

我环顾四周

display: table-cell;
vertical-align: middle;

似乎是最流行的解决方案

【讨论】：

【解决方案7】：

HTML

<div class="outside">
  <div class="inside">
      <p>Centered Text</p>
  </div>
</div>

CSS

.outside { 
  position: absolute; 
  display: table; 
}

.inside {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}

【讨论】：

与其他方法不同，我喜欢这种方法不需要我跟踪内部和外部的高度

【解决方案8】：

display: block;
text-align: center;

【讨论】：

【解决方案9】：

如果<div> 中有文本：

text-align: center;
vertical-align: middle;
display: table-cell;

【讨论】：

【解决方案10】：

添加行高也有帮助。

text-align: center;
line-height: 18px; /* for example. */

【讨论】：

【解决方案11】：

div {
    height: 256px;
    width: 256px;
    display: table-cell;
    text-align: center;
    line-height: 256px;
}

诀窍是将line-height 设置为等于div 的height。

【讨论】：

【解决方案12】：

对于父 div，使用以下 CSS：

style="display: flex;align-items: center;"

【讨论】：

【解决方案13】：

添加到包含文本的选择器

margin:auto;

【讨论】：