如何使用CSS垂直居中文本

0 投票
最新提问 1月 15, 2017 用户: 开心心 (320 分)

我有一个div标签,其中包含文本,我想让该div中的内容垂直居中。

这里是我的div css:

#box
{
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}
<div Id="box">
  测试垂直居中
</div>

有哪些好的方法做到这一点?

1个回答

0 投票
最新回答 1月 15, 2017 用户: linfeng (520 分)

你可以尝试这个基本的方法:

div {
  height: 90px;
  line-height: 90px;

  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

只适用于单行文本,因为我们将行的高度设置为与包含框元素相同的高度。


更多的方法

这是垂直对齐文本的另一种方法。此解决方案将适用于单行和多行文本,但仍需要一个固定高度的容器:

div {
  height: 200px;
  line-height: 200px;

  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>多行文本居中测试多行文本居中测试多行文本居中测试多行文本居中测试多行文本居中测试多行文本居中测试多行文本居中测试</span>
</div>

CSS仅设置了<div>的尺寸,通过设置<div>的行高等于其高度来达到垂直居中对齐的目的,<span>内嵌块用vertical-align: middle。然后将<span>的行高恢复默认,它的内容自然会流向块中。


模拟表显示

这里是另一种选择,这可能无法工作在较旧的不支持的浏览器display: table和display: table-cell(Internet Explorer 7)。HTML与第二个示例相同:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>多行文本居中测试多行文本居中测试多行文本居中测试多行文本居中测试多行文本居中测试多行文本居中测试多行文本居中测试多行文本居中测试</span>
</div>

使用CSS我们“模拟”表显示行为,因为表支持垂直对齐:

div {
  display: table;
  width: 250px;
  height: 100px;
  text-align: center;
}

span {
  display: table-cell;
  vertical-align: middle;
}

使用绝对定位

这种技术使用绝对定位的元素设置上,下,左,右。请参考https://css-tricks.com/centering-in-the-unknown/

欢迎来到编程助手,编程方面有什么不懂的问题可以尽管在这里提问,你将会收到热心爱好者的回答。
...