居中实现方式总结

一 inline元素水平居中

1. text-align: center

二 宽度确定的block元素水平居中

1. margin:0 auto

三 宽度未确定的block元素水平居中

1. 绝对定位+left:50%+tanslateX:(-50%)
2. display: table;margin: 0 auto;
3. 父元素flex布局，设置justify-content:center; 父元素flex布局，子元素设置margin:0 auto;
4. 父元素grid布局，设置justify-content:center; 父元素grid布局，子元素设置margin:0 auto;

四 垂直居中

1. 父元素flex布局，设置align-items:center; 父元素flex布局，子元素设置margin:auto 0;
2. 父元素grid布局，设置align-items:center; 父元素grid布局，子元素设置margin:auto 0;
3. 父元素设置 display: table-cell; vertical-align: middle
4. 绝对定位+top:50%+tanslateY:(-50%)
5. 行内元素，令line-height等于父元素的height