方案 ​

1. 定位+margin:auto：父元素设为相对定位，子元素绝对定位，四个定位属性值都设为 0，然后给子元素设置 margin:auto，实现居中。（不确定尺寸的情况不适用）
2. 定位+负 margin 值：父元素相对定位，子元素绝对定位，top:50% 和 left:50%，再用负的自身宽高的一半作为 margin-left 和 margin-top，实现居中。（不确定尺寸的情况不适用）
3. 定位+transform：父元素相对定位，子元素绝对定位，top:50% 和 left:50%，然后用 transform: translate(-50%, -50%)，实现居中。（可能虚化）
4. Flex布局：父元素display: flex，并设置justify-content: center和align-items: center，实现居中。
5. Grid 布局：父元素 display: grid，并设置 justify-content: center 和 align-items: center，实现居中。
6. 表格布局：父元素 display:table-cell，并设置 vertical-align: middle 和 text-align: center，子元素 display: inline-block 实现居中。

css-元素水平垂直居中的多种方案 (codepen.io)