垂直居中分两种情况：1.父元素高度确定的单行文本 2.以及父元素高度确定的多行文本。
1.垂直居中-父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height高度一致来实现的，即此时单行文本的行高line-height=height(父元素块高度)。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
但是有一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块：
#sy{
margin-top:20px;
text-align:center;
height:50px;
line-height:50px;
width:200px;
font-size:20px;
background:#F30;}
<div id="sy">你看我是不是超出了父块元素？</div>所以这种方法用于网页的页眉或者页脚还是很不错的
2.垂直居中-父元素高度确定的多行文本
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
（td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。）
.jz{
height:200px;
background:yellow;
}
<table><tbody><tr><td class="jz">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>方法2：通过设置父元素块为：display:table; 子元素为：display:table-cell;vertacal:middle;来让多行文本达到垂直居中效果（类似方法1）
table：此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
table-cell ： 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
例子1：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多行水平垂直居中</title>
<style type="text/css">
.no1{
display: table;
height: 300px;
border: 2px solid blue;
text-align: center;
}
.no2{ display: table-cell;
vertical-align: middle; } </style> </head>
<body>
<div class="no1">
<div class="no2">
<p>搞事情搞事情搞事情</p>
<p>要打架是不是？</p>
<p>一百块都不给我！</p>
</div> </div>
</body>
</html>
例子2：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多行垂直水平居中2</title>
<style type="text/css">
#no1{
display: table;
height: 300px;
border: 2px solid black;
text-align: center;
}
#no1 p{
font-size: 20px;
display: table-cell;
vertical-align: middle; }
</style>
</head>
<body>
<div id="no1">
<p>
搞事情搞事情搞事情<br>打架是不是？<br>一百块都不给我！
</p>
</div> </body>
</html>
两个例子有不同，剩下的思考思考，动动脑子，总不会有坏处,思考留评论让我看看你们的想法哇