元素垂直居中和水平居中方案

水平居中方法：

1. 行内级元素：设置父元素的text-align: center。//当前子元素
2. 块级元素：设置当前块级元素（宽度）margin: 0 auto。//当前元素
3. 绝对定位且元素有宽度情况下：Left/right:0/margin: 0 auto。//当前子元素
4. flex 布局：justify-content: center。//当前元素

垂直居中方案：

一、垂直居中方法之绝对定位的弊端 必须使用定位，从而脱离标准流。 必须给元素设置高度。

二、垂直居中方法之 flex 布局的弊端 当前 flex 局部中所有的元素都会被垂直居中。 相对来说，兼容性差一点点（基本可以忽略）

三、垂直居中方法之 top/translate。

1. 先相对于父元素向下位移50%再相对于自身向上位移50%(子元素)

   position:relative;
   top:50%;(相当于父元素)
   transform:translate(0,-50%);(相当于自身)