css 水平垂直居中

1.

 display: flex;
 justify-content: center;
 align-items: center;

<!-- HTML -->
<div class="flex__container">
    <div class="flex__item"></div>
</div>

/* CSS */
.flex__container {
    display: flex;
    justify-content: center;
    align-items: center;
}

2.position: abolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);