[CSS]要素を上下左右の中央に配置、最近主流になっている実装方法のまとめ

子要素を親要素の左右中央に配置するのは、簡単です。
インライン要素は「text-align: center;」で、ブロック要素であれば「margin: 0 auto;」で中央に配置できます。

難しいのは天地、上下の中央です。
CSS Hackは使用せず、要素を上下左右の中央に配置する実装方法を紹介します。

サイトのキャプチャ

Absolute Centering with CSS


下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

positionプロパティを使って、要素を上下左右の中央に配置

「position: absolute;」を使用したテクニックは、要素を上下左右の中央に配置する最も簡単な解決策の一つです。

子要素の配置は「position: absolute;」で絶対位置にし、leftとtopのプロパティに50%のオフセットを指定します。
要素の位置は左上から計算されるため、「translate(-50%、-50%);」で幅と高さの半分の値を引き戻します。要素のサイズが決まっている場合は、正確な値で負のマージンを指定できます。

transformを使用する利点は、要素のサイズを知る必要がないということです。

HTML

CSS

実装の注意点

  • 子要素のサイズがビューポートより大きいと問題があるため、ビューポートより小さなサイズにする必要があります。
  • 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

CSS

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

CSS

このテクニックには別バージョンがあります。
親要素のjustify-contentおよびalign-itemプロパティの代わりに、子要素に「margin: auto;」を設定すると、中心に配置することができます。IEは非対応です。

See the Pen Absolute Centering with Flex by Adam Laki (@adamlaki) on CodePen.

実装の注意点

CSS Gridを使って、要素を上下左右の中央に配置

CSS Gridはレスポンシブ対応のレイアウトを実現するために策定された素晴らしい機能です。Flexboxと同様に、簡単に上下左右の中央に要素を配置することができます。

親要素でdisplayプロパティをgridに設定し、columnsとrowsの幅を指定します。あとは子要素にjustify-selfとalign-selfプロパティをcenterに設定するだけです。

HTML

CSS

See the Pen Absolute Centering with CSS Grid by Adam Laki (@adamlaki) on CodePen.

実装の注意点

sponsors

top of page

©2018 coliss