Question

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

Answer 1

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

要垂直居中，如果同一行中有另一个元素与其对齐，则只能使用vertical-align:middle。
看到它正常工作here。

我们使用高度为100％的空跨度，然后使用vertical-align：middle将内容放在下一个元素中。

还有其他技术，例如使用table-cell或将内容放在绝对定位的元素中，top，bottom，left和right都设置为零，但它们都会遇到跨浏览器兼容性问题。

Answer 2

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

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

你的div上的

，它适用于任意数量的行。您可以在此处查看测试：http://jsfiddle.net/qMtZV/1/

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

更新02/10/2016

五年后，这种技术仍然有效，但我相信这个问题有更好，更可靠的解决方案。由于现在Flexbox支持很好，您可能希望按照这些方式执行某些操作：http://codepen.io/michelegera/pen/gPZpqE。

Answer 3

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

Answer 4

如果您在<div>：

中有文字

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

Answer 5

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

诀窍是将line-height设置为等于height的{{1}}。

Answer 6

对于父div，请使用以下CSS：

@DynamicValue

Answer 7

添加行高也有帮助。

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

Answer 8

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

text-align:center;

...

Answer 9

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

div {  
    vertical-align:middle;  
}

如果是尺寸问题，请注意2个文本行和填充样式很有可能使高度超过30px。

例如，如果你的字体大小是12像素而你的div填充是5像素，则一个文本行div高度将是5px（padding-top）+ 12px + 5 px（padding-bottom）= 22px＆lt; 30px所以没问题，

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

尝试增加div高度（可能是40px）或减少填充。

希望它会有所帮助

Answer 10

这对你有用吗？

div { text-align: center; }

Answer 11

我环顾四周，

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

似乎是最受欢迎的解决方案

Answer 12

display: block;
text-align: center;

Answer 13

添加到包含文本

的选择器

margin:auto;