【css】5种方法实现div居中（自用）

越简短的排越前，复制粘贴用

1.父元素使用grid，父设定place-content

.parent {
    display: grid;
    place-content: center;
}

2.父元素使用grid，子设定margin

.parent {
    display: grid;
}
.child {
    margin: auto;
}

3.父设置flex，子设定margin

.parent {
    display: flex;
}
.child {
    margin: auto;
}

4.父设置flex

.parent {
    display: flex;
    /* 水平轴center */
    justify-content: center; 
    /* 交叉轴center */
    align-items: center;
}

5.绝对定位

.parent {
    position: absolute;
    /* 使用后左边缘位于父元素中间 */
    top: 50%;
    left:50%;
    /* 减去自身一半的宽、高后子元素真正做到居中 */
    transform: translate(-50%, -50%);
}