div實現水平垂直居中的幾種方法

<div class="parent">
    <div class="child"></div>
</div>
.parent {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}
或
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transfrom: translate(-50%, -50%;)
}
或
.child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

複製程式碼