一、单行文本的居中
1.文字水平居中（text-align: center）
<div style="text-align: center;height: 200px;width: 300px;border: 1px solid red">你好呀</div>
2.文字垂直居中（line-height:200px;height: 200px;）行高与块高度一致
你好呀 二、多行文本的垂直居中
1、通过verticle-align:middle 实现 CSS垂直居中
通过vertical-align:middle 实现 CSS垂直居中是最常用的方法，但是vertical生效的前提是元素的元素是display: table-cell
<div style="height: 200px; width: 200px; background-color: #bfa; display: table-cell; vertical-align: middle;">你好呀</div>
2、通过display:flex实现CSS垂直居中。
随着越来越多浏览器兼容CSS中的flexbox特性，所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。
通过display:flex实现CSS垂直居中的方法是给父元素display:flex; 而子元素align-self:center;
这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。
<div style="height: 200px; width: 600px; border:1px solid; display: flex;">
<div style="height: 100px; width: 100px; background-color: #bfa; align-self:center">你好1</div>
<div style="height: 100px; width: 100px; background-color: #bfa; align-self:center">你好2</div>
<div style="height: 100px; width: 100px; background-color: #bfa; align-self:center">你好3</div>
</div>
