深入理解line-height_垂直居中

上图中绿色为顶线，蓝色中线，红色基线，粉色底线。

基本概念

行高：上下文本行基线间的距离，图中粉线之间的距离

行距：文本的底线到下一行文本的顶线之间的距离，距离上等于距离上等于line-height和font-size的差值，图中粉线到绿线的距离
半行距：半行距即行距的一半，距离上等于line-height和font-size的差值的一半

内容区：顶线和底线之间包裹的区域

行内框：每个行内元素都会生成一个行内框（包括inline-block元素），行内框是看不见到（个人理解：选中一行文本后蓝色的背景就是该行的行内框），是浏览器渲染模型的一个概念，当改变行高时行内框是不变的，如果没有padding影响行内框等于内容区。

行框：本行的虚拟矩形框，也是浏览器渲染模型的一个概念。简单的说就是一行上可能有大小不同的文本，每种大小的文本都有自己的行内框，行框的高度等于本行所有行内框的最大值，父元素的行高会影响行框高度，每行都有自己的行框。

line-height

line-height设置元素行高，默认值normal（浏览器一般设置为1.2），有继承性。当应用到块级元素上时，他定义了元素基线之间的最小距离。

浏览器处理行高的方式：把line-height和font-size的差值分为两半，分别加到文本的顶部和底部。

行高属性值：属性值为number时表示行高为当前字体大小的倍数；属性值为length时表示设置固定的行间距；属性值为百分比时表示基于当前字体尺寸百分比；inherit继承。

文本垂直居中原理

<style>
.t1 {
  width: 150px;
  font-size: 16px;
  line-height: 5;
  background: green;
}
.t2 {
  font-size: 20;
  line-height: 0.1;
  background: green;
}
</style>
<p >你好你好你好</p>
<p >你好你好你好</p>

结果：

你好你好你好

你好你好你好

上面的例子中通过设置元素的行高实现了垂直居中，原理也很简单，只需搞清楚两个问题：

  1. 元素的高度是重哪里来的
  2. 浏览器是如何处理行高的

通过例1和例2的对比，很容易知道元素的高度是由于行高撑开的而不是字体本身的高度撑开的，而浏览器处理行高的方式上面也说了：“把line-height和font-size的差值分为两半，分别加到文本的顶部和底部”，于是对于例1，上下各增加(16 * 5 - 16 ) / 2 = 32px，所以最终文字是垂直居中的

百分比和数值的不同

<style>
  .t3 {
    font-size: 16px;
    background: green;
    line-height: 150%;
  }
  .t3 span {
    font-size: 30px;
  }
  .t4 {
    font-size: 16px;
    background: green;
    line-height: 1.5;
  }
  .t4 span {
    font-size: 30px;
  }
</style>

<p >
  <span>你好<br>你好</span>
</p>
<p >
  <span>你好<br>你好</span>
</p>

结果：

你好
你好

你好
你好

虽然行高是有继承性的，但是line-height: 150%和line-height: 1.5的表现效果是不同的，在上面的例3中用的百分比，子元素继承的是计算后的值，即16 * 150% = 24px。例4中使用了数值，子元素继承的是"元数值"，子元素最后的行高是30 * 1.5 = 45px。