水平垂直居中

要实现元素的水平垂直居中首先先要分成两种情况：

1.未知元素的宽高

• 水平方向：

①

• 行内元素

1. 在父元素中用text-align：center；
2. 在父元素中用width：fit-content，再配合margin：auto实现。

• 块状元素

1. 用margin：auto。

• 注：同时两者也可以通过css的display属性转变为对方，使用对方的居中方法；

②在元素的父元素中通过flex的justify-content：center实现居中对齐

• 竖直方向：

1.在元素的父元素中通过flex的align-items：center实现
2.将元素的父元素的display属性设置成table-cell,再用vertical-align：middle实现
3. 设置position：absolute。top，bottom都设置成0，然后用margin：auto

2.已知元素的宽高（未知宽高的那些方法同样可用）（w代表宽度，h代表高度）

① 同样是用绝对定位position：absolute。不同的是left和top设置为50%，再将margin设置为 -h/2 0 0 -w/2()
② 将css的transform属性设置为translate（50%，50%），再将margin设置为 -h/2 0 0 -w/2

注：position:absolute和float会隐式的改变元素的display类型。display：none除外，只要设置了这两个中的任意一个，都会让元素以inline-block类型显示：可以设置长宽（不继承父元的长宽），进而margin：auto也适用。