html5 文字居中原理,深入理解CSS行高line-height与文本垂直居中的原理

前言

在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了，比如下面的例子：

复制代码代码如下:

Document

div {

width: 300px;

height: 200px;

border: 1px solid red;

}

span {

line-height: 200px;

}

文本垂直居中原理

这样，span标签中的文字就相对于div垂直方向居中了，想要文本水平居中设置text-align：center即可。

那么，它怎么就垂直居中了？为了弄清楚它，下面我们先来看几个概念。

1. 行框

在浏览器中，会将给每一段文本生成一个行框，行框的高度就是行高。行框由上间距、文本高度、下间距组成，上间距的距离与下间距的距离是相等的。