简要介绍一下

水平居中：

被居中元素的宽度固定：

1. margin：0 auto

2. display：inline-block配合text-align:center

3.display: flex配合justify-content: center

被居中元素的宽度不固定：

1.display: box;box-orient: horizontal;box-pack: center;三者配合。(兼容性很差)

2.width: fit-content; margin:0 auto;二者配合。

3.浮动配合相对定位。(不好理解)

4.绝对定位配合相对定位。(上一个方法的变通)

垂直居中：

1.绝对定位和负外边距。(固定高度时才可用)

2.绝对定位配合transform: translate(0, -50%);

3.position: absolute; top: 0; bottom: 0; margin: auto;(固定高度时才可用)

4.父元素设padding值。

5.设置第三方基准。

6.display: flex配合align-items: center。