实例1：图片水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div style="background-color: gray;line-height: 300px;text-align: center;">
<img src="123.jpg" style="width: 300px;vertical-align: middle;">
</div>
<!-- 关键在于是要设置父级line-height的值，而不是height，再就是img的vertical-align: middle-->
</body>
</html>
实例2：多行文本水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
line-height: 250px;
text-align: center;
background-color: gray;
}
.text{
display: inline-block;
line-height: normal;
vertical-align: middle;
text-align: left;
}
</style>
</head>
<body>
<div class="box">
<span class="text">秋风用时光的旋律，用桂花的芬芳、苹果的馨香、菊花的灿烂、牵牛花的奔放、一串红的艳丽，把一望无际的田野乡村，演绎得在自然中沉醉，渲染得天地间空旷而又阳刚。秋风用时光的旋律，用桂花的芬芳、苹果的馨香、菊花的灿烂、牵牛花的奔放、一串红的艳丽，把一望无际的田野乡村，演绎得在自然中沉醉，渲染得天地间空旷而又阳刚</span>
</div>
<!-- 多行文本垂直居中，最主要的是要重置子元素的line-height和text-align，并把display设置为inline-block
这是因为子元素的line-height和text-align如果不设置就继承父级的，与我们想要表示有冲突，设置为display:inline-block
是因为子元素的行高是根据line-height: normal属性，就字体大小重新计算，而设置大小就要求子元素是block类型的
-->
</body>
</html>