盒子水平居中的几种方式
1.父元素加 display: flex; justify-content: center; align-items: center;
2.子绝父相 子 left: 50%; top; 50%; 负margin(盒子宽高的一半);
3.子绝父相 子 left: 50%; top; 50%; transform: translate(-50%, -50%);
4.子绝父相 子 top: 0; right: 0; left: 0; bottom: 0; margin: auto;
5.父 display: flex; 子元素 margin: auto;
6.子绝父相 子 left: calc(50% - 子元素自身的宽度的一半); top: calc(50% - 子元素高度一半);
7.table-cell(把盒子变成表格单元格 单元格居中)
父 display: table-cell; vertical-align: middle; 子 margin: auto;