单行和多行文本垂直居中

¶文本的父盒子使用绝对值高度时的情况，如`height: 300px;`

首先先明确，行高和盒子（元素）的高度不是一个概念。

行高即文本中一行的高度。盒子中可以有多个文本行。

规律：

文字在行高中默认是垂直居中的。
在企业开发中，经常将盒子的高度和行高设置一样，那么就能保证一行文字在盒子的高度中垂直居中，简而言之，要想一行文字在盒子中垂直居中，那么就需要设置这行文字的行高（line-height）等于盒子的高度。
在企业开发中如果一个盒子中有多行文字，那么不能使用文字的行高等于盒子的高度来实现文字垂直居中，只能通过设置padding值来让文字居中。

实现过程：
- 单行文字实现垂直居中的情况（设div为父盒子，文本盒子p为子盒子）
  
  （1）设置父盒子行高等于父盒子的高度
- 多行文字实现垂直居中的情况（设div为父盒子，文本盒子p为子盒子）
  
  （1）清除所有元素的默认内外边
  
  （2）显式地设置父盒子行高以方便计算
  
  （3）父盒子添加样式box-sizing: border-box; 以防止增加文字后盒子的宽高变大。
  
  （4）通过设置父盒子样式padding-top: (父盒子高度-多行文本行高总和)/2; padding-bottom: (父盒子高度-多行文本行高总和)/2;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本垂直居中</title>
	<style type="text/css">
		/*清除所有元素的默认内外边距，这对多行文字实现垂直居中有影响。*/
		*{
			margin: 0px;
			padding: 0px;
		}
		/*单行文字实现垂直居中的效果*/
		.box1{
			width: 300px;
			height:300px;
			background-color: gray;
		}
		.box1{
			/*单行文字实现垂直居中只需要设置盒子行高等于父盒子的高度即可*/
			line-height: 300px;
		}

		/*多行文字实现垂直居中的效果*/
		.box2{
			width: 300px;
			height: 300px;
			background-color: skyblue;
		}
		.box2{
			box-sizing: border-box; /*防止增加文字后盒子的宽高变大*/
			line-height: 20px;
			/*通过在浏览器查看发现p2中的文字有三行，每行20px，共有4*20px=80px，那么box2减去p2剩余的的高度为300px-80px=220px。于是上下各设置值为110px的内边距即可实现多行文字垂直居中。*/
			padding-top: 110px;
			padding-bottom: 110px;
		}
	</style>
</head>
<body>
	<div class="box1">
		<p class="p1">
			Hello World！
		</p>
	</div>
	<div class="box2">
		<p class="p2">
			1. 什么是Git ?
			Git是一个开源的分布式版本控制系统。
			Git的分布式：Git采用了分布式版本库的方式，不一定要服务器端软件支持即可在本地完成版本控制工作。
		</p>
	</div>
</body>
</html>

¶文本的父盒子使用百分比值高度时的情况，如`height: 50%;`

div使用line-height居中文字的话,就必须使用绝对的px值让line-height等于父盒子的高度px。
但如果文本的父盒子div的高度是百分比值时，如果直接设置line-height:父盒子的百分比值得话是无法实现元素内部的文字垂直居中的。
解决方法：
方法一:
给需要居中的元素加以下代码样式和
display:flex;
align-items:center;
如果还要实现水平居中的话可以加上justify-content:center;
方法二:
增加一个父元素,给父元素设置position:absolute; display:table; 给需要居中的元素设置display:table-cell; vertical-align:middle;
但有个问题，那就是设置display:table-cell; vertical-align:middle;了的多个盒子会跑到一行里。

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
	html,body{
		margin:0px;
		height:100%;	
	}
	div{
		height: 50%;
		background-color: pink;
		display:flex;
		align-items:center;   /*垂直居中*/
		/*justify-content:center; */  /*水平居中*/
	}
</style>
</head>
<body>
	<div>
		<p>I am div !</p>
	</div>
</body>
</html>

¶文本的父盒子使用绝对值高度时的情况，如height: 300px;

¶文本的父盒子使用百分比值高度时的情况，如height: 50%;

¶文本的父盒子使用绝对值高度时的情况，如`height: 300px;`

¶文本的父盒子使用百分比值高度时的情况，如`height: 50%;`