【css3】盒子居中的8中方法

<div class='parent'>
    <div class='child'></div>
</div>

.parent{
    position:relative;
}
.child{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.parent{
    position:relative;
}
.child{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
}

.parent{
    display:flex;
    justify-content:conter;
    align-item:center;
}

.parent{
    display:flex;
    justify-content:center;
}
.child{
    align-self:center;
}

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

.parent{
    display:grid;
    justify-content:center;
    align-items:center;
}

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

.parent{
    display:grid;
}
.child{
    align-self:center;
    juslify-self:center;
}