水平居中
方法1:margin: 0 auto
原理：
块级元素 有七个水平属性，分别是：
- 左外边距margin-left
- 左边界border-left
- 左内边距padding-left
- 内容宽度width
- 右内边距padding-right
- 右边界border-right
- 右外边距margin-right
这七个水平属性的总和必须等于父元素的宽度。实际情况中，我们设置的水平属性之和并不一定等于父元素的宽度。在这七个属性中，margin-left/margin-right/width这三个属性可以设置为auto，用来弥补实际值与所需总和的差距。
使用手法：
- 要居中的必须元素是个块级元素
- 要居中的元素不能是浮动元素
- 要居中的元素的定位不能是fixed或者absolute的定位
- 要居中的元素必须有一个显示值定的宽度不能是auto
方法2:text-align:center
原理和使用场景
MDN上对于这个属性的描述：
text-align CSS 属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。
方法3:flex大法 yyds!
万能方法
- 盒子flex化
- 设置主轴、辅轴的垂直
PS 虽然经常使用但是有时候还是会忘记主轴和辅轴的居中属性
主轴 :justify-content: center; => jcc
辅轴 : align-items: center; => aic
