flex布局水平垂直居中

1、定位+拉取（box2为固定大小）

相对父容器进行定位，先向右、向下各移动50%，使子元素的左上角顶点与父容器中心点相重叠，再margin拉取自身的一半。

示例：

2、定位+位移

translate的百分比是按照box2来计算的，这种模式非常适合box2不是固定大小的情况。

先相对父容器进行定位，先向右、向下各移动50%，使子元素的左上角顶点与父容器中心点相重叠，再向左移动自身宽度的一半，向上移动自身高度的一半。

示例：

3、一种技巧解决方案。

margin:auto + position的上下左右0

示例：

4、flex弹性

1.在弹性盒子中，margin:auto;会让上下左右都生效。
给父元素添加弹性： display：flex；
给子元素添加外边距： margin:auto;

示例：

2.给父元素的主轴添加：
justify-content: center;
使子项在主轴居中对齐；

给父元素的侧轴添加 ：
align-items: center;
使子项在侧轴居中对齐；

示例：