常见居中方案
- 行内元素水平居中：直接使用text-align：center
-
行内元素垂直居中：vertical-align：middle并设置父级元素的行高为父级元素的高度
-
固定宽度的元素 水平居中使用：magin：0 auto
-
flex弹性布局：设置justify-content：center水平居中，align-items：垂直居中
-
通过padding属性进行垂直居中
-
设置父级元素为：display：table-cell，vertical-align：middle
-
通过伪元素设置垂直居中：设置父级元素一个伪元素 并设置其为inline-block，同时设置vertical-align：middle
-
高度确定的时候：绝对定位+margin来垂直居中
-
高度不确定的时候：绝对定位+transform，具体为：设置需要垂直居中的元素为：position：absolute，top：50%，transform：translateY(-50%)
-
通过flex-duration：column来垂直居中：display：flex，flex-duration：column，justify-content：center
水平垂直居中方法：
- 父级元素高度已知，子元素高宽固定（高度可不固定）：text-align：center，line-height：父级高度
2.绝对定位+margin实现垂直水平居中，需要知道子元素高宽度
-
绝对定位+transform实现垂直水平居中，可以不知道子元素高宽度：position：absolute；top：50%；left：50%；transform：translate（-50%，-50%）
-
使用display为table，子元素为display：table-cell；vertical-align：center；text-align：center子子元素设置为vertical-align：center
-
使用父元素的伪元素进行垂直居中（父元素需要知道高度），设置伪元素的高度为100%，并设置vertical-align：middle，display：inline-block；子元素设置vertical-align：center；display：inline-block（子元素水平居中可以采用text-align：center或者margin：0 auto）
-
子元素设置为margin：auto；position：absolute；top：0；left：0；right：0；bottom：0；