1. 行内元素水平居中：直接使用text-align：center

2. 行内元素垂直居中：vertical-align：middle并设置父级元素的行高为父级元素的高度

3. 固定宽度的元素 水平居中使用：magin：0 auto

4. flex弹性布局：设置justify-content：center水平居中，align-items：垂直居中

5. 通过padding属性进行垂直居中

6. 设置父级元素为：display：table-cell，vertical-align：middle

7. 通过伪元素设置垂直居中：设置父级元素一个伪元素 并设置其为inline-block，同时设置vertical-align：middle

8. 高度确定的时候：绝对定位+margin来垂直居中

9. 高度不确定的时候：绝对定位+transform，具体为：设置需要垂直居中的元素为：position：absolute，top：50%，transform：

translateY(-50%)

10. 通过flex-duration：column来垂直居中：display：flex，flex-duration：column，justify-content：center

水平垂直居中方法：

1. 父级元素高度已知，子元素高宽固定（高度可不固定）：text-align：center，line-height：父级高度

2.绝对定位+margin实现垂直水平居中，需要知道子元素高宽度

3. 绝对定位+transform实现垂直水平居中，可以不知道子元素高宽度：position：absolute；top：50%；left：50%；transform：translate

（-50%，-50%）

4. 使用display为table，子元素为display：table-cell；vertical-align：center；text-align：center子子元素设置为vertical-align：center

5. 使用父元素的伪元素进行垂直居中（父元素需要知道高度），设置伪元素的高度为100%，并设置vertical-align：middle，display：inlineblock；子元素设置vertical-align：center；display：inline-block（子元素水平居中可以采用text-align：center或者margin：0 auto）

6. 子元素设置为margin：auto；position：absolute；top：0；left：0；right：0；bottom：0；