CSS⾏⾼（line-height）使⽂本垂直居中详解
⼀.场景重现
在我们的静态页⾯设计中，在我们的块级元素中写⼊⽂字时：
<div class="center">我想在中间</div>
.center{
height: 50px;
css设置文字垂直居中background-color: #008c8c;
}
会发现我们最后在⽹页显⽰的效果为：
这明显不太美观，我们想把它垂直居中，那常⽤的⽅式就是设置⾏⾼与块级元素的宽度⼀样，只需要在css中加⼊
line-height: 50px;
即可。
但是，我⼀直不明⽩这是为什么。。。于是······
⼆.原理解析
在了解⾏⾼是什么之前，让我们看看字体设计的⼀个概念：
在上图中表⽰的是⼀个在字体设计由字体设计师所要考虑的五条线，由设计师来设计之间的距离⽐例，其中顶线和底线之间的距离就是我们经常说的字体⼤⼩，也就是我们在css中font-size的⼤⼩。
但是在顶线向上和低线向下会延伸⼀段空间，这两段空间相等，这段空间在默认情况下（未设置line-height或line-height为normal），是会使⽤字体设计者设计的默认值。⽽这字体⼤⼩再加上这两个空间的距离就是我们所说的⾏⾼，也被称为virtual-area(虚拟区)：
也就是说，我们可以通过改变line-height的值来改变virtual-area的值，当line-height的⼤⼩与块级元素的⼤⼩相同时，那整个块级元素的⾼度就是字体的虚拟区，前⾯说过顶线向上延伸的空间和低线向下延伸的空间相等，使得字体到块级元素的顶部和到块级元素的低部相同，也就巧妙地达到了⽂字垂直
居中的样式。
除了line-height之外，vertical-align的值也与设计字体时的这五条线有关。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。