为什么在css中设置line-height值与模块height值相同时，效果是文本在模块中垂直居中

@为什么在css中设置line-height值与模块height值相同时，效果是文本在模块中垂直居中[TOC](删除线格式 这里写自定义目录标题)
       前几天老师上课说到这个概念，只是先让我们记住这个公式，后期会说明为什么。无奈我是那种不搞明白其所以然就浑身不爽的强迫症晚期患者，于是花了整整半天才思考出自己觉得能说得过去的原因。
       要弄清楚这个概念，首先要明白什么是行高。看了网上很多别人的博客，他们提到了英语格式本中四线三格的概念，说行高是上下两条基线之间的距离。其实说的是对的，只是在我这里用英文四线去理解css行高的问题有点懵圈（也有可能是我笨。。。。）。我的理解相对就比较通俗了，就把行高当成两行文字中各行文本的中心点之间的垂直距离。于是，就出现了一个公式：行高=上一行文本的下半部分+上一行文本的下间距+下一行文本的上间距+下一行文本的上半部分。其中，第一个变量加上第四个变量就是文本的高度。这时候，此公式可以换算成行高=文本高度+上下间距。
       这时候，我们可以把这个公式套用到盒子模型中。我们都知道，盒子模型中，border内部的高度由内容的高度和上下两个padding组成。这个概念和上个自然段最后的公式非常相似。因此，当我们把line-height的值设置为height的值时，内容的高度就相当于文本的高度，上下两个padding就相当于上下间距。要知道，上下间距是相同的（英语本中两行四线格之间的空白部分就是由两个相同长度的上下间距组成的)。既然上下两个padding值相同，很显然这个文本在模块中是在垂直居中的地方。
       这时候很多人会提出疑问：如果按照这样的说法，我可以不设置line-height等于height值，那么上下间距也是一样的，也是垂直居中啊。我们要弄清楚，我们要这个文字是相对于一个模块中垂直居中的。假如一个模块的height值是100px，而我们设置line height为60px，很抱歉，这个时候你的文本只是相对于这个文本的上一行文本和下一行文本是垂直居中的，并且上下间距分别是（60-文本高度）/2，但绝不是位于我们所要的模块当中的垂直居中。只要我们将line-height设置为100px，这个时候，如果文本高度（内容content的高度）为50px，那么上下padding肯定各为25px；同理，如果文本高度为60px，那么上下padding肯定各为20px。无论你的文本高度怎么变，只要设置了line-height的高度等于模块的height高度，系统自动会为你的文本计算出上下padding相同的距离。