flex弹性布局的水平居中方式:
1. justify-content: center; align-items: center;
2. 在子元素上设置margin: auto
3. 在子元素上设置align-self: center;margin: 0 auto;
grid网格布局的水平居中方式:
4. 在其子元素上设置margin: auto;
5. 在其子元素上设置justify-self: center; align-self: center;
6. 在子元素上设置margin: calc(50% - 35px(子元素的一半高度)) auto;
css布局的水平居中方式
7. 子绝父相的方式实现, 父元素设置绝对定位, 子元素相对定位, 上下左右都设置为0, margin设置成auto
8. 也是子绝父相的方式实现, 但是要设置transform属性, 让X和Y轴都减去一半
9. 基于表格的水平居中方式, 前提是子元素要转换为行内块或者行内元素
10. 最后一种就是基于块内文字的水平居中方式
