[CSS]テキストや画像を上下左右の中央寄せに配置、最近主流になっている実装方法のまとめ
Post on:2019年3月2日
sponsors
子要素を親要素の左右の中央寄せに配置するのは、簡単です。
インライン要素は「text-align: center;」で、ブロック要素であれば「margin: 0 auto;」で中央に配置できます。
難しいのは天地、上下の中央です。
CSS Hackはなしで、要素を上下左右の中央寄せに配置する実装方法を紹介します。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- positionプロパティを使って、要素を上下左右の中央寄せに配置
- 単位vhを使って、要素を上下左右の中央寄せに配置
- Flexboxを使って、要素を上下左右の中央寄せに配置
- CSS Gridを使って、要素を上下左右の中央寄せに配置
positionプロパティを使って、要素を上下左右の中央寄せに配置
「position: absolute;」を使用したテクニックは、要素を上下左右の中央寄せに配置する最も簡単な解決策の一つです。
子要素の配置は「position: absolute;」で絶対位置にし、leftとtopのプロパティに50%のオフセットを指定します。
要素の位置は左上から計算されるため、「translate（-50％、-50％）;」で幅と高さの半分の値を引き戻します。要素のサイズが決まっている場合は、正確な値で負のマージンを指定できます。
transformを使用する利点は、要素のサイズを知る必要がないということです。
HTML
|
1 2 3 |
<main> <p>CSS is awesome!</p> </main> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 15px 30px; background: rgba(0,0,0,0.4); color: #fff; text-align: center; width: 300px; } |
See the Pen Absolute Centering with the Position Property by Adam Laki (@adamlaki) on CodePen.
実装の注意点
- 子要素のサイズがビューポートより大きいと問題があるため、ビューポートより小さなサイズにする必要があります。
- WebKitブラウザで、レンダリングがぼやけていることがあります。その場合は「backface-visibility: hidden;」と「transform-style: preserve-3d;」を加えます。
単位vhを使って、要素を上下左右の中央寄せに配置
「position: absolute;」を使用しないで実装することもできます。単位にvhを使用し、「margin: 50vh auto 0;」を使用したテクニックです。
左右の中央はmargin-leftとmargin-rightに「auto;」を指定し、上下の中央は相対的なvhの値を使用します。そして、positionプロパティのテクニックと同様に、高さの半分の値を引き戻すために、「translateY(-50%);」を指定します。
HTML
|
1 2 3 |
<main> <p>CSS is awesome!</p> </main> |
CSS
|
1 2 3 4 5 6 7 8 9 10 |
main { margin: 50vh auto 0; transform: translateY(-50%); padding: 15px 30px; background: rgba(0,0,0,0.4); color: #fff; text-align: center; width: 300px; } |
See the Pen Absolute Centering with the vh Unit by Adam Laki (@adamlaki) on CodePen.
実装の注意点
- このテクニックは、メインのビューポートに配置している場合にのみ機能します。
Flexboxを使って、要素を上下左右の中央寄せに配置
現時点で最良の方法は、少し古くなったFlexboxのテクニックではありません。Flexboxで古いブラウザをサポートしたい場合は、ベンダープレフィックスと異なる値の名前を使用する必要があります。
Flexboxで要素を中央寄せに配置するには、親要素にdisplayプロパティをflexに設定し、justify-contentとalign-itemsプロパティをcenterに設定します。
HTML
|
1 2 3 |
<main> <p>CSS is awesome!</p> </main> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #3397FF; line-height: 1.5em; } main { padding: 15px 30px; background: rgba(0,0,0,0.4); color: #fff; text-align: center; width: 300px; } |
このテクニックには別バージョンがあります。
親要素のjustify-contentおよびalign-itemプロパティの代わりに、子要素に「margin: auto;」を設定すると、中心に配置することができます。IEは非対応です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
body { display: flex; min-height: 100vh; background: #3397FF; line-height: 1.5em; } main { margin: auto; padding: 15px 30px; background: rgba(0,0,0,0.4); color: #fff; text-align: center; width: 300px; } |
See the Pen Absolute Centering with Flex by Adam Laki (@adamlaki) on CodePen.
実装の注意点
- Flexboxをサポートしていない古いブラウザでは機能しません。
※Flexboxのサポートブラウザ
CSS Gridを使って、要素を上下左右の中央寄せに配置
CSS Gridはレスポンシブ対応のレイアウトを実現するために策定された素晴らしい機能です。Flexboxと同様に、簡単に上下左右の中央に要素を配置することができます。
親要素でdisplayプロパティをgridに設定し、columnsとrowsの幅を指定します。あとは子要素にjustify-selfとalign-selfプロパティをcenterに設定するだけです。
HTML
|
1 2 3 |
<main> <p>CSS is awesome!</p> </main> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
body { display: grid; grid-template-columns: 100vw; grid-template-rows: 100vh; background: #3397FF; line-height: 1.5em; } main { justify-self: center; align-self: center; padding: 15px 30px; background: rgba(0,0,0,0.4); color: #fff; width: 300px; text-align: center; } |
See the Pen Absolute Centering with CSS Grid by Adam Laki (@adamlaki) on CodePen.
実装の注意点
- CSS Gridをサポートしていない古いブラウザでは機能しません。
※CSS Gridのサポートブラウザ
sponsors
