文本居中，文本垂直居中，论line-height的妙用。

最新推荐文章于 2023-01-09 21:23:05 发布

原创最新推荐文章于 2023-01-09 21:23:05 发布 · 293 阅读

CC 4.0 BY-SA版权

本文介绍如何使用CSS的line-height属性实现文本在块元素内的垂直居中，简化传统内外边距和定位计算的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家好，这里是笑颜の行方。
本篇描述的是 line-height 这个属性，也就是行高。

进入正题之前，先问大家一个问题。
如何使一段文本在块元素内居中？

这个问题，我想很多人都能答上来。

div{
  width: 200px;
  height: 50px;
  background-color: aqua;
  text-align: center;
}

在块元素的样式里设置 文本居中 即可。
日常的文本居中

好，我们现在看，我们给块元素设置了一定的高度。
那么，问题来了。

如何使文本垂直居中？
（这里的浏览器默认字体大小是16像素。）

是不是要给块元素加内边距？
是不是要给文本行块化，再设置各种边距？
甚至是定位？

然而……这些都要计算，不是吗？

在解答这个问题之前，先看一下 line-height 也就是行高这个属性。

先试着将行高设置为30像素。

div{
  width: 200px;
  height: 50px;
  background-color: aqua;
  text-align: center;
}
div>span{
  line-height: 30px;
}

给文本添加行高
文字不像之前紧贴着块元素的顶部，像是设置了内边距，
或者文本设置了外边距，甚至使用了定位。

哦吼，也许有人发现了嘛。
块元素的高度为50像素，那么行高也设置为50像素呢？

div>span{
  line-height: 50px;
}

答案出现了。
没错，就是这样，文本既实现了水平居中，又实现了垂直居中，完美！

同理，如果块元素高度增加，文本的行高也只需设置成块元素对应的高度即可。

不需要设置麻烦的内外边距，也不用精准计算定位，文字的垂直居中，
两行代码就搞定了，是不是很简单？