CSS行高（line-height）及文本垂直居中原理-原创手记-慕课网

在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了，比如下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 300px;
height: 200px;
border: 1px solid red;
}
span {
line-height: 200px;
}
</style>
</head>
<body>
<div>
<span>文本垂直居中原理</span>
</div>
</body>
</html>
这样，span标签中的文字就相对于div垂直方向居中了，想要文本水平居中设置text-align：center即可。
图片描述
那么，它怎么就垂直居中了？为了弄清楚它，下面我们先来看几个概念。
行框
在浏览器中，会将给每一段文本生成一个行框，行框的高度就是行高。行框由上间距、文本高度、下间距组成，上间距的距离与下间距的距离是相等的。
图片描述
默认情况下一行文本的行高分为：上间距，文本的高度，下间距，并且上间距是等于下间距的，所以文字默认在这一行中是垂直居中的。

作者： Dunizb
链接：http://www.imooc.com/article/7767
来源：慕课网