你经常用的line-height使内容垂直居中，你真的懂它的原理吗？

最新推荐文章于 2025-02-12 09:04:39 发布

丑小鸭变黑天鹅

最新推荐文章于 2025-02-12 09:04:39 发布

阅读量9.2k

点赞数 25

分类专栏： css日常总结文章标签： css css3

本文链接：https://blog.csdn.net/qq_41880073/article/details/115025963

版权

css日常总结专栏收录该内容

25 篇文章

订阅专栏

你经常用的line-height使内容垂直居中，你真的懂它的原理吗？

一、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>