你经常用的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

# css # css3
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生