html結構如下：

<div id="box">
    <span id="main">
        ...
    </span>
</div>

方法1：通過定位，設定子元素top:0，bottom:0，margin:auto自動垂直居中；

核心程式碼設定如下：

#box{
    position: relative;
}
#main{
    position: absolute;
    top:0;
    bottom:0;
    margin:auto;
}

方法2：通過定位，設定子元素top:50%，margin-top:-子元素高度的一半，這裡一定設定margin-top一定要加上“-”，讓子元素向上再移動自身一半的高度；

核心程式碼設定如下：

#box{
    position: relative;
}
#main{
    position: absolute;
    top:50%;
    /*假設子元素高200px,實際數值以真實情況而定*/
    margin-top:-100px;
}

方法3：通過定位，設定子元素top:50%，translate向反方向平移子元素高度的一半，讓子元素向上再移動自身一半的高度；

核心程式碼如下：

#box{
    position: relative;
}
#main{
    position: absolute;
    top:50%;
    transform: translate(0,-50%)
}
 

方法4：通過flex佈局，設定容器佈局方式為flex佈局，豎直方向的軸線（預設交叉軸）對齊方式為居中（center）；

核心程式碼如下：

#box{
    display: flex;
    align-items: center;
}

ps：此處的我在設定時，主軸方向預設為橫向，實際使用時以真實場景做調整，核心思想不變；

總結：

在居中元素（子元素）高度固定的場景下，以上四種方法都可行，在居中元素（子元素）高度不固定時，可採用後兩種方法，依然可行；

以上僅為個人開發過程中總結，不足之處，歡迎指正，也歡迎留言交流