【CSS】水平垂直居中
-
给父盒子设置属性 flex
- display: flex;写在父元素上这就是定义了一个伸缩容器
- justify-content：center 设置主轴对齐方式为居中，默认是横轴。子元素居中。
- align-items：center 设置纵轴对齐方式为居中，默认是纵轴。子元素居中。
-
给父盒子和子盒子设置属性
给容器设置 display: flex; 子项设置 margin: auto;
-
绝对定位设置居中
容器设置position: relative。子元素设置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%);
优点就是不用关心子元素的长和宽，但是这种方法兼容性依赖 translate2d 的兼容性
-
绝对定位另一种方法
需要给子元素设置 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;