flex布局水平垂直居中

flex布局中子元素居中很简单：
第一种：
通过弹性先让元素左右居中，在设定每行居中，即可

第二种：
效果跟第一种相同
在弹性容器中margin：auto；是可以上下左右都生效的。

当然除了弹性的方式还有其他方式：

1.通过margin+transform: translateY的方式：
transform: translateY（-50%）是拉去自身子元素自身高度的50%。
注意给父元素加BFC，不然top方向会将父容器带下来。

2.通过margin：auto;position：fiexd上下左右为0可以在可视区域剧中固定。


弹性布局中还有一些妙用，让多个元素均匀居中。
1.justify-content: space-around;


2.justify-content: space-between;

3.justify-content: space-evenly;

4.flex-grow: 1;