CSSで縦方向にセンタリングする方法【基本手法6つを紹介】

異なるサイズのディスプレイでコンテンツをセンタリングし正しく動作させるのは、デザイナーにとって未だに大きなチャレンジです。

実装の手段も様々に存在し、どれが最も優れているのかがわかりにくくなっています。多くのCSSによる縦方向センタリングは多くのコーディングが必要になったり、メディアクエリを使う必要に迫られたりします。それぞれの手法がどのように目的を達成し、HTMLやブラウザのルールにどのように影響されるのかを知ることで、より優れた実装を選べるようになるでしょう。

 

 

では、実際に作ってみましょう。まずは基本となる要素を作ります。

 

 

 

ブログなどではよく使われる実装です。itemクラスを与えたコンテンツラッパーがあり、p要素の内部にテキストが入ります。この段落、またはitemラッパーのコンテンツこそが今回センタリングする要素になります。

 

ここからはセンタリングを実現する手法を6つ紹介していきます。

 

 

・絶対位置指定

最もわかりやすい手法はこれでしょう。

 

 

定義されたheight、width、auto marginのおかげでブロック要素や画像をitemラッパーの中心に配置することができます。しかしテキスト要素に使うとテキストが常に左上や右上に配置されてしまい、テキスト量によってはセンタリングされたように見えなくなってしまいます。

 

 

・transform

最初の手法と同じように、transformでは親要素の高さを知る必要があります。異なるのは、高さにパーセントのような動的な値を使うことができる点です。

 

 

 

・line-height

親要素が決まった大きさになっていて、センタリングしたいものがボタンやリストアイテム、画像オーバーレイなどフォントサイズを持っているときにはこの手法がベストです。

 

 

 

・padding

親要素がheightを持っているときにはコンテンツを常に同じようにパディングさせてセンタリングできます。blockquoteなどシンプルな要素でうまく動きます。

 

 

 

・テーブル

ブラウザ標準のテーブルモデルを使ったシンプルかつ効果的な手法です。HTMLのテーブルとは異なることに注意してください！

 

 

 

・Flexbox

コンテンツに複雑な要素が含まれていてテーブルの手法が使えない場合にはこれがベストでしょう。

 

 

 

ここまで6つの手法を紹介しましたが、シンプルさとスピードの観点から見るとCSSのテーブルを使うのが一番です。より柔軟性が必要で複雑な要素を扱う場合にはFlexboxが活躍します。これらの手法を場合によって使い分けられるようにしましょう。

 

 

 

※本記事は、CSS Vertical Centering – Everything You Need To Knowを翻訳・再構成したものです。