CSS에서 수직 센터링을 달성하는 6가지 방법(코드 예)

<p class="box box2">
    <span class="content content2">垂直居中</span></p>

.box{
    width:200px;
    height:200px;
    background-color:green;   
}
.content{
    background-color:yellow;   
}

.box2{
    display:table-cell;      //此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
    text-align:center;       //左右居中
    vertical-align:middle;   //上下居中        
}

.box2{
    display: flex;
    justify-content:center;  //左右居中
    align-items:center;      //上下居中
}

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-40px;
    margin-left:-40px;
}

.box2{
    position:relative;
}
.content2{
    margin:auto;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

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

.box2{
    display: flex;
    text-align: center;
}
.box2 .content2{margin: auto;}