異なるサイズのディスプレイでコンテンツをセンタリングし正しく動作させるのは、デザイナーにとって未だに大きなチャレンジです。 実装の手段も様々に存在し、どれが最も優れているのかがわかりにくくなっています。多くのCSSによる縦方向センタリングは多くのコーディングが必要になったり、メディアクエリを使う必要に迫られたりします。それぞれの手法がどのように目的を達成し、HTMLやブラウザのルールにどのように影響されるのかを知ることで、より優れた実装を選べるようになるでしょう。 では、実際に作ってみましょう。まずは基本となる要素を作ります。 ブログなどではよく使われる実装です。itemクラスを与えたコンテンツラッパーがあり、p要素の内部にテキストが入ります。この段落、またはitemラッパーのコンテンツこそが今回センタリングする要素になります。 ここからはセンタリングを実現する手法を6つ紹介していきます。