实现元素水平居中和垂直居中的几种方法

1. 单行文本的居中
   水平居中：text-align:center
   垂直居中：line-height:~px (px前的数字为元素坐在行的行高)
2. 多行文本的垂直居中
   1）使用diaplsy:table来实现
   display: table使块状元素成为一个块级表格
   display: table-cell;子元素设置成表格单元格
   vertical-align: middle;使表格内容居中显示
   即可实现垂直居中的效果;
   2）使用absolute与transform配合使用
   position:absolute; 首先给文本绝对定位；
   left:50%;top:50%;transform:translate(-50%,-50%)
   让文本距离盒子左边和上边分别为50%
   再用transform向左（上）平移它自己宽度（高度）的50%
   也就达到居中效果了。
   3）使用flex实现
   display: flex;设置 display 属性的值为 flex 将其定义为弹性容器
   justify-content: center; 定义了项目在主轴上的对齐方式，水平对齐居中
   align-items: center;定义项目在交叉轴（纵轴）上如何对齐，垂直对齐居中