【CSS】水平垂直居中

1. 给父盒子设置属性 flex

   • display: flex;写在父元素上这就是定义了一个伸缩容器
   • justify-content：center 设置主轴对齐方式为居中，默认是横轴。子元素居中。
   • align-items：center 设置纵轴对齐方式为居中，默认是纵轴。子元素居中。

2. 给父盒子和子盒子设置属性

   给容器设置 display: flex; 子项设置 margin: auto;

3. 绝对定位设置居中

   容器设置position: relative。子元素设置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%);

   优点就是不用关心子元素的长和宽，但是这种方法兼容性依赖 translate2d 的兼容性

4. 绝对定位另一种方法

   需要给子元素设置 position: absolute; 设置固定宽度和高度;top、left、bottom、right都设置为0; margin设置为auto；也能实现垂直水平居中。

flex:1 的作用

• 首先 flex: 1; 等同于 flex: 1 1 auto;
• flex: 1 实际上是三个属性的缩写：flex-grow: 1; flex-shrink: 1 flex-basis: auto;