CSS行高（line-height）使文本垂直居中详解

一.场景重现

在我们的静态页面设计中，在我们的块级元素中写入文字时：

<div class="center">我想在中间</div>

.center{
            height: 50px;
            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的值也与设计字体时的这五条线有关。