一：水平居中方案：
1、行内元素
设置 text-align:center
2、定宽块状元素
设置 左右 margin 值为 auto
3、不定宽块状元素
a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto
b:给该元素设置 displa:inine 方法
c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%
4、对于多个块级元素：
对父元素设置 text-align: center；
对子元素设置 display: inline-block；
5、使用 flex 布局
二：垂直居中设置
1、行内元素
单行：
设置上下 pandding 相等；
或者设置 line-height 和 height 相等
多行：
设置上下 pandding 相等；
父元素设置 display: table-cell; 和 vertical-align: middle;
或者使用 flex 布局；
2、块级元素：下面前两种方案，父元素需使用相对布局
父元素已知高度：子元素使用绝对布局 top: 50%，再用负的 margin-top 把子元素往上拉一半的高度；
父元素未知高度：子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%)；
使用 Flexbox：选择方向，justify-content: center;
三：水平垂直居中
定高定宽：
先用绝对布局 top: 50%; left: 50%;，再用和宽高的一半相等的负 margin 把子元素回拉；
高度和宽度未知：
先用绝对布局 top: 50%; left: 50%;，再设置 transform: translate(-50%, -50%)；
使用 Flexbox：
justify-content: center; align-items: center;