line-height与div高度相同使其居中的最简单理解

关于line-height，网上已经有很多的解释了，但是别人讲的什么基线，中线，底线，顶线，我个人对于理解标题所述问题还是一头雾水。直到今天才明白了实现的原理。

比如本来是font-size=20px的文字，但是浏览器在处理的时候可能是18px;但是这一行文字占用的高度就是20px（这就是为什么在p中两行文字看起来是有间隔的）；所以如果有两行文字，同时没有设置line-height的话，其实两行文字是紧挨着的。当我们设置行高为50px的时候，文字这一行font-size还是20px;但是他所占据的高度则为50px;并且文字位于高度的中心；

我们一般在设置单行文本的时候，喜欢把line-height设置为与div的高度相同，这样就让文字居中了。为什么这么做呢？因为div的高度一般是大于文字大小的。所以此时文字并不是在div的高度的中间。我们将line-height设置为与div的高度相同时，这样就可以使文字高度（line-height）占满div高度，自然文字就处于div的中间了。