你经常用的line-height使内容垂直居中，你真的懂它的原理吗？
一、line-height是什么
line-height 属性设置行间的距离（行高），说的直白一点，就是设置两段段文本之间的距离如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了。
二、分析其原理
首先来看个图
如图，每一行文字，可看成由上间距、文本内容、下间距构成，根据行高的标准定义，行高等于两条基线之间的距离，即第一行的3-4+上下间距+第二行的1-2+2-3，因为css中每一行的上间距和下间距肯定是相等的，所以代换一下，行高就等于它本身的上间距+下间距+文本高度。因此，我们也可以把行高记为，行高就是一行的高度，这一行的高度中包含了上下两个间距和文本内容本身。而文本内容在每一行中都是居中的，所以利用这个原理，就可以实现垂直居中。
看个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container {
width: 100px;
height: 200px;
line-height: 200px;
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
哈哈哈
</div>
</body>
</html>
如上图所示。本例子中，我们设置div的高度为200px，然后里面有一行文本，我们设置了行高为200px，设置完200px后，文字本身16px不会改变，变的是它的上间距和下间距。正如上图所描述的那样。我想到这，你就应该明白了line-height为什么可以使其垂直居中了。
三、扩展一下
再来看一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container {
width: 100px;
height: 200px;
line-height: 200px;
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
哈哈哈哈哈哈哈哈哈哈哈啊哈哈
</div>
</body>
</html>
可以发现和上面的例子代码位移不一样的地方是文本变多了一些，先来看一下此时的效果。
好像不是我们想要的垂直居中效果，这是为什么呢？
div盒子我们设置的宽度是200px，默认当内容宽度超过盒子宽度时，会自动换行。所以当文本换行之后就造成了这样的结果。
我们再想，即使自动换行了，我们也想要下图中的效果。而不是上图中那样的效果。
先分析一下上图结果的原理。当换行之后，因为我们设置了line-height：200px。也就是说它会给段落行高设置为200px，而此时由于自动换行，换成了3行。所以它给每一行都设置了行高为200px，这就是造成上图那样的原因。
那么我就想要下图这样的效果，我们该怎么做呢？我们可以利用display：table-cell和vertical-align: middle;来进行设置。直接看代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container {
width: 100px;
height: 200px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
哈哈哈哈哈哈哈哈哈哈哈啊哈哈
</div>
</body>
</html>
分享就到这里了，加油吧！IT人
本篇文章有部分内容借鉴了该作者https://blog.csdn.net/yangyuqingabc/article/details/84178815
