垂直中央css実現の4つの方法
1302 ワード
html構造は以下の通りです.
方法1:位置決めにより、サブ要素top:0、bottom:0、margin:autoを自動的に垂直に中央に配置する.
コアコードは次のように設定されています.
方法2:位置決めにより、サブ要素top:50%、margin-top:-サブ要素の高さの半分を設定し、ここで必ずmargin-topを設定し、必ず「-」を加えて、サブ要素を上にして自分の半分の高さを移動させる.
コアコードは次のように設定されています.
方法3:位置決めにより、サブ要素top:50%を設定し、translateはサブ要素の高さの半分を逆方向に平行移動し、サブ要素を上に移動させる.
コアコードは次のとおりです.
方法4:flexレイアウトにより、コンテナレイアウト方式をflexレイアウト、垂直方向の軸線(デフォルトの交差軸)の位置合わせ方式を中央(center)に設定します.
コアコードは次のとおりです.
ps:ここで私が設定したとき、主軸の方向はデフォルトで横方向で、実際に使用するときは実際のシーンで調整して、核心思想は変わらない.
以上は個人開発の過程でまとめたもので、不足点は指摘を歓迎し、伝言交流も歓迎します.
...
方法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つの方法を採用することができ、依然として実行可能である。
以上は個人開発の過程でまとめたもので、不足点は指摘を歓迎し、伝言交流も歓迎します.