垂直中央css実現の4つの方法

html構造は以下の通りです.

    
        ...
    

方法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:ここで私が設定したとき、主軸の方向はデフォルトで横方向で、実際に使用するときは実際のシーンで調整して、核心思想は変わらない.
 

まとめ:

中央要素(サブ要素)の高さが固定されているシーンでは、以上の4つの方法が実行可能であり、中央要素(サブ要素)の高さが固定されていない場合、後の2つの方法を採用することができ、依然として実行可能である。

 
以上は個人開発の過程でまとめたもので、不足点は指摘を歓迎し、伝言交流も歓迎します.