分类别讨论CSS居中问题
1、行内元素
实现水平居中的需要依靠父元素text-align: center;
2、行内块元素和块级元素可以不依靠父级实现居中
可以借助vw、vh实现居中，注意vw、vh实现居中，它相对的不是父节点或者页面的根节点，所以使用时我们需要清除html自带的margin
calc()
可以使用+ - * /四则运算，
可以使用%、px、rem、em等单位
可以混用各种单位进行计算，+ -前后必须留空格，建议全部运算符都留有空格
3、绝对定位position实现居中
方法1: 设为绝对定位，然后让left设为0，right设为0，margin 设为auto
方法2:
4、flex实现水平居中
felx实现居中主要借助父元素，对父盒子实现flex布局，justify-content:center水平居中、align-item垂直居中
5、grid布局：
Grid实现居中，对其父元素设置display:grid,子元素。margin：auto 即可实现水平垂直居中
6、table布局
父元素设为 display
元素不定宽高的时候
方法一：绝对定位+transform
需要被居中的元素没有宽和高的时候，利用transform实现居中
方法2:table-cell+display:inline-block
方法3: flex