解决水平和垂直居中的方案

水平居中

1. 行内元素
语法：text-align:center
使用范围：inline、inline-block、inline-table、inline-flex

2. 块级元素

1. margin: 0 auto;（必须要有宽度）
2. display:table; + margin: 0 auto;（宽度是内容的宽度）
3. position: absolute + transform:translate();（兼容性不强）
4. display:flex; + justify-content:center;

3. 多块级元素

1. display:flex; + justify-content:center;
2. inline-block
3. 浮动
4. 绝对定位

垂直居中

1 .单行内联元素
line-height和height设置一样高

2 .多行内联元素

1. flex-direction:column;（兼容性不强）
2. 表格的vertical-align:middle;

3 .块级元素

1. position: absolute + transform:translate();（兼容性不强）
2. position: absolute + 负margin;（已知高度）
3. flex布局中的align-items
4. display:table-cell; + vertical-align:middle;

水平垂直居中

1. 绝对定位与负边距实现（已知高度）
2. 绝对定位 + margin:auto（已知高度）
3. 绝对定位 + transform:translate();
4. flex布局中的align-items和 justify-content:center;

图片和文字在一起的居中方法

1. display: inline-block;（两个一起）+ vertical-align: middle;
2. 浮动（一起浮动）
3. 定位
4. 把图片设置为背景图片，利用背景定位