绝对定位让元素完全居中的三种方法

方法一：（不能微调）

父容器：

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

方法二：（可微调）

要居中的元素：

position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; /* 元素高度的一半 */
margin-left: -100px; /* 元素宽度的一半 */

方法三：（不能微调）

父容器：

display: flex;
flex-direction: row: /* row 为横向排列，column 为纵向排列 */
align-items: center;
justify-content: center;