CSS 3垂直中央詳細
2421 ワード
CSSで水平中央を実現するのは非常に簡単で、inline要素はtext-align:center;block要素用margin:auto;それでいいです.しかし、垂直中心を実現するには大きな難題です.本編では、将来の利用に備えて、既知の案を集め、整理しました.コードはGitHubからダウンロードできます.
Flexフレックスボックスabsolute絶対位置決めvhビューポート単位FlexフレックスボックスFlexフレックスボックスは垂直中心を解決する最善の方法であるべきであり、IE 10の没落に伴い、煩わしい互換性の問題が克服されつつある.使用法は簡単で、垂直に中央に位置する要素が必要な親コンテナにdisplay:flexを設定し、align-items:centerを指定します.これで終わりです
body {
}main {
}
mainを垂直に中央に配置するには、親要素bodyにdisplay:flexを設定するだけです.およびalign-items:center;できます.mainにはdivとpがあり、この2つの要素をmainの中で垂直に中央に配置したいと思っています.同じように親要素mainにdisplay:flexを設定するだけです.とalign-items:center;.さらにjustify-contentとflex-directionは、この2つのサブ要素の水平中央の配列順序を調整するために使用される.
absolute絶対位置決め負のmarginを絶対位置決めで組み合わせるのが一般的な方法です.構想はabsoluteに設定した後、topとleftを50%に指定し、要素の左上隅の位置決め点をページの真ん中に置くことです.次に、負のmarginの半分の要素幅で要素をページの真ん中に戻します.
main {
しかし、欠点は、要素のwidthとheightを事前に指定する必要があることです.そうしないと、負のmarginに値を設定できず、柔軟性が足りないように見えます.要素の幅を固定する必要はありません.負のmarginの代わりにtranslate()シフトを使用して、要素をページの正の中心に戻すことを実現します.(変形要素に詳しくない場合は、CSS 3 transformの紹介を参照してください)
main {
}
absoluteを絶対的に位置決めして垂直に中央にある要素をドキュメントストリームから離れ、topとleftの各50%を指定して要素の左上隅の位置決め点をページの真ん中に設定します.次にtranslate()で負の50%ずつ、要素をページの真ん中に戻します.考え方は負のmarginと一致しており,要素の幅を固定する必要がないという利点がある.欠点はabsoluteの絶対位置決めの威力が大きすぎて、ページレイアウトに影響を与えるかどうかを考慮することです.
vhビューポート単位前例のtranslate()は、absoluteがtopとleftの各50%を絶対的に位置決めすることを前提として要素を引き戻します.しかしabsoluteの絶対的な位置決めを見ると気分が悪くなり、vhビューポート単位に変更して要素の左上隅の位置決め点を設定することができます.
vhはビューポートの高さ、vwはビューポートの幅です.たとえば1 vhはビューポートの高さの1%を表します.
vminは、vhなどのビューポート幅の高い小さな値です.
vmaxは、vhなどのビューポート幅の高い値です.
absoluteの絶対位置決めをvhで置き換えることができます
main {
}
absoluteを外して小包性を失ったのでwidthサイズを指定する必要があります.margin-topは50 vhに設定され、ビューポートの高さの50%の位置を表します.次にtranslateY(-50%)で元素を引き上げます.translateYは水平位置がautoに指定されているため、水平位置は引き戻さない
Flexフレックスボックスabsolute絶対位置決めvhビューポート単位FlexフレックスボックスFlexフレックスボックスは垂直中心を解決する最善の方法であるべきであり、IE 10の没落に伴い、煩わしい互換性の問題が克服されつつある.使用法は簡単で、垂直に中央に位置する要素が必要な親コンテナにdisplay:flexを設定し、align-items:centerを指定します.これで終わりです
body {
…
display: flex;
align-items: center;}main {
…
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;}
flex
mainを垂直に中央に配置するには、親要素bodyにdisplay:flexを設定するだけです.およびalign-items:center;できます.mainにはdivとpがあり、この2つの要素をmainの中で垂直に中央に配置したいと思っています.同じように親要素mainにdisplay:flexを設定するだけです.とalign-items:center;.さらにjustify-contentとflex-directionは、この2つのサブ要素の水平中央の配列順序を調整するために使用される.
absolute絶対位置決め負のmarginを絶対位置決めで組み合わせるのが一般的な方法です.構想はabsoluteに設定した後、topとleftを50%に指定し、要素の左上隅の位置決め点をページの真ん中に置くことです.次に、負のmarginの半分の要素幅で要素をページの真ん中に戻します.
main {
position: absolute;
width: 18em;
height: 10em;
top: 50%;
left: 50%;
margin-top: -9em;
margin-left: -5em;
…しかし、欠点は、要素のwidthとheightを事前に指定する必要があることです.そうしないと、負のmarginに値を設定できず、柔軟性が足りないように見えます.要素の幅を固定する必要はありません.負のmarginの代わりにtranslate()シフトを使用して、要素をページの正の中心に戻すことを実現します.(変形要素に詳しくない場合は、CSS 3 transformの紹介を参照してください)
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
…}
absolute
absoluteを絶対的に位置決めして垂直に中央にある要素をドキュメントストリームから離れ、topとleftの各50%を指定して要素の左上隅の位置決め点をページの真ん中に設定します.次にtranslate()で負の50%ずつ、要素をページの真ん中に戻します.考え方は負のmarginと一致しており,要素の幅を固定する必要がないという利点がある.欠点はabsoluteの絶対位置決めの威力が大きすぎて、ページレイアウトに影響を与えるかどうかを考慮することです.
vhビューポート単位前例のtranslate()は、absoluteがtopとleftの各50%を絶対的に位置決めすることを前提として要素を引き戻します.しかしabsoluteの絶対的な位置決めを見ると気分が悪くなり、vhビューポート単位に変更して要素の左上隅の位置決め点を設定することができます.
vhはビューポートの高さ、vwはビューポートの幅です.たとえば1 vhはビューポートの高さの1%を表します.
vminは、vhなどのビューポート幅の高い小さな値です.
vmaxは、vhなどのビューポート幅の高い値です.
absoluteの絶対位置決めをvhで置き換えることができます
main {
width: 9em;
margin: 50vh auto 0;
transform: translateY(-50%);
…}
vh
absoluteを外して小包性を失ったのでwidthサイズを指定する必要があります.margin-topは50 vhに設定され、ビューポートの高さの50%の位置を表します.次にtranslateY(-50%)で元素を引き上げます.translateYは水平位置がautoに指定されているため、水平位置は引き戻さない