垂直居中的方法

1. 仅适用于单行文本：设置子元素的line-height = 父元素的height。
2. 父元素：display: table; 子元素：display: table-cell，vertical-align: middle（注意！对图片使用这种方法需要将图片包裹在一个容器中）。
3. 给元素添加display: flex; align-items: center;即可。
4. 给父元素添加position: relative; ，给子元素添加position: absolute;top: 50%;transform: translateY(-50%);属性即可。

水平居中：

1. 直接给父元素：text-align: center;
2. 针对具有固定宽度的元素，谁需要居中，就给谁：margin: 0 auto;
3. 父元素相对定位，子元素绝对定位：left: 50%, transform: translateX(-50%);
4. 使用flex盒子，给父元素添加属性：display: flex,justify-content: center;