flex-居中方式总结

水平居中：

1.行内级元素：设置父元素的 text-align：center

2.块级元素：设置当前块级元素的（宽度）

margin：0 auto

3.绝对定位：元素有宽度的情况下，

left: 0/right: 0/mrgin: 0 auto

4.flex：

justify-content:center

垂直居中：

1.绝对定位：在元素有高度的情况下，

top:0/bottom:0/margin:auto 0;

弊端：

1> 必须使用定位（意味着脱离标准流）

2> 必须给元素设置高度

示例：

2.垂直居中：flex布局（较推荐）

弊端：

1> flex布局中所有的元素都会被垂直居中

2> 相对来说，兼容性差一点点（基本可以忽略）

• 示例：

  

3.垂直居中：top/translate（较推荐）

1. 让元素向下位移父元素（背景元素）的 50%

2. 让元素向上位移自身的 50%

示例：