13 ways to vertical center

昔、CSS の限界は、垂直方向のセンタリングのような「単純」なものでさえ困難をもたらし、一部の人は JavaScript のソリューションに頼っていました。

テキストの横にアイコンや画像を配置しようとしても、人気のある「ヒーロー」バナーを作成しようとしても、あるいはモーダル オーバーレイを作成しようとしても、垂直軸でのセンタリングは常に苦労していました。

しかし、CSS はそれ以来長い道のりを歩んできており、垂直方向のセンタリングを容易にする多くの方法を提供しています。

Absolute positioning and margin auto

固有のサイズを持たない要素は、単に上下に等しい値を使用することで「中央揃え」することができます。 要素に固有のサイズがある場合は、上下に0を使用し、margin autoを適用します。

.container{ position:relative;}.element{ position:absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 20px; /*requires explicit height*/}

See the Pen
Centering 1: absolute positioning by Facundo Corradini (@facundocorradini)
on CodePen.

制限はもちろん、要素の高さを明示的に宣言しなければ、コンテナ全体を占有してしまうことです。

定番のtop 50% translate -50%

これは最初の一つであり、今でも多くの開発者が利用しています。

.container{ position: relative;}.element{ position: absolute; top: 50%; transform: translateY(-50%);}

CodePenでFacundo Corradini (@facundocorradini)さんのPen
Centering 2: top 50 translateY -50を見てみましょう。

かなり堅実なアプローチで、唯一の大きな制限は、トランジション/アニメーションを適用するときなど、他のトランスフォームの邪魔になるかもしれないtranslateの使用です。

テーブル。

本当にシンプルなアプローチで、最初のものの 1 つである (昔はすべてがテーブルだった) テーブル セルと vertical-align の動作を使用して、コンテナ上の要素を中央に配置します。

これは、実際にテーブルを使って行うこともできますし（恥、恥、恥）、セマンティック HTML を使って、要素の表示をテーブルセルに切り替えることもできます：

.container{ display: table; height: 100%;}.element{ display: table-cell; text-align: center; vertical-align: middle;}

CodePen の Pen
Centering 3: tables by Facundo Corradini (@facundocorradini)
をご覧ください。

これは、両方の要素の高さが不明な場合でも動作します。

また、スクリーンリーダーでは完全に失敗することを覚えておいてください（たとえマークアップがdivに基づいていても、CSSのdisplayをtableとtable-cellに設定すると、スクリーンリーダーは実際のテーブルとして解釈します）。 アクセシビリティに関しては最高とは言えません。

ゴースト 要素法

何らかの理由で流行らなかったもう 1 つの古い方法は、親の高さが 100% であるゴースト (擬似) 要素で inline-block を使用し、vertical-align プロパティを middle に設定することです。

.container::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-left: -1ch;}.element{ display: inline-block; vertical-align: middle;}

CodePenのPen
Centering 4: ghost element method by Facundo Corradini (@facundocorradini)
をご覧ください。

実際には非常にうまく機能していますが、最も顕著な「問題」は、インラインブロック要素間のホワイトスペースの挙動がいつも不愉快になるため、水平方向の中心がほんの少し右に移動することです。

これは、他の文脈でのインライン ブロックの問題と同様に対処できます。最も単純なアプローチは、上記で使用した margin-left -1ch (ただし、ch 単位は「0」文字の幅を意味するため、等幅フォント以外では 100% 正確ではありません)、または、コンテナでフォント サイズを 0 に設定し、要素で px または rem にリセットします。

flex-item での自動マージン

ようやく最新の CSS の領域に入った flexbox は、自動マージンのための非常に素晴らしい動作を導入しました。

.container{ display:flex;}.element{ margin:auto;}

See the Pen
Centering 5: margin:auto on a flex-item by Facundo Corradini (@facundocorradini)
on CodePen.

この方法はシンプルなので、私のお気に入りの一つです。

flex-container 上の疑似要素

世界で最も実用的なアプローチではありませんが、柔軟で空の疑似要素を使用して、要素を中央に配置することもできます。

.container{ display:flex;}.element{ margin:auto;}

Penの
Centering 6: pseudos on a flexbox by Facundo Corradini (@facundocorradini)
on CodePenをご覧ください。

これは、複数のアイテムを持つ列指向のフレックスコンテナで柔軟な間隔を保ちたいときに便利です。

7 & 8. flex-container または flex-item での整列

Flexbox には、非常に優れた整列プロパティも導入されています (これらは現在、独自の box alignment モジュールにフォークされています)。

フレックス方向に応じて、justify-content または align-items を使用して、必要に応じて調整することができます。

コンテナの場合：

.container{ display: flex; justify-content: center; align-items: center;}

CodePenのPen
Centering 7: align on flex-container by Facundo Corradini (@facundocorradini)
をご覧ください。

特定のflex-itemについて：

.container{ display: flex;}.element{ align-self: center; margin: 0 auto;}

ペンを見る
Centering 8: align on flex-item by Facundo Corradini (@facundocorradini)
on CodePen.

古いブラウザをサポートする必要がある場合を除き、あまりデメリットはありません。 IE 11 は動作するはずですが、フレックスボックスの実装にはかなりのバグがあるため、常に細心の注意を払う必要があります。

9 & 10. Grid-container または grid-item での配置

CSS Grid には flexbox とほぼ同じ配置オプションが含まれているので、grid-container で使用することができます。

.container{ display: grid; align-items: center; justify-content: center;}

CodePenのPen
Centering 9: align on grid-container by Facundo Corradini (@facundocorradini)
をご覧ください。

または、特定のグリッドアイテム上での調整：

.container{ display: grid;}.element{ justify-self: center; align-self: center}

レガシーブラウザのサポートがないことが、このテクニックの唯一の制限です。

See the Pen
Centering 10: align on grid-item by Facundo Corradini (@facundocorradini)
on CodePen.

グリッド上の擬似要素

フレックスボックスの代替案と同様に、擬似要素を使用した3列グリッドを使用することができます:

.container{ display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr);}.container::before,.container::after{ content:"";}

1frは実際にはminmax(auto, 1fr)を意味することを覚えておいてください、つまり空の行は必ずしもコンテナの高さの3分の1を占めるわけではありません。

CodePenでFacundo Corradini (@facundocorradini)さんのPen
Centering 11 : grid + pseudosをご覧ください。

これは一見馬鹿げたアプローチに見えるかもしれませんが、私の好きなCSS Gridのトリックの1つを簡単に実現することができます。frの行とminmaxの行を組み合わせることで、空のfrの行が最初に崩れ、次にmixmaxの行が崩れます。

だから、完全に折りたためる行を擬似的に使用することで、自動配置アルゴリズムが実際の要素に魔法をかけることができます。 ただし、自動配置ができない IE をサポートする必要がある場合は別です。

明示的なグリッドの行の配置

CSS のグリッドでは、アイテムを特定の行に明示的に配置することができますので、上記と同じグリッド宣言を行い、アイテムを 2 行目に配置すれば十分です。 信じられないかもしれませんが、IE は CSS グリッドの最初の強力な支持者の 1 つで、2011 年に IE10 で出荷されました。

.container{ display: -ms-grid; -ms-grid-rows: (1fr); -ms-grid-columns: 1fr;}.element{ -ms-grid-column: 1; -ms-grid-row: 2;}

See the Pen
Centering 12 : explicit placement on a grid by Facundo Corradini (@facundocorradini)
on CodePen.

Margin auto on a grid-item

flexboxと同様に、grid-itemにmargin-autoを適用すると、両方の軸でセンタリングされます。

.container{ display: grid;}.element{ margin: auto;}

CodePenでPen
Centering 12 : explicit placement on a grid by Facundo Corradini (@facundocorradini)
をご覧ください。

Some (Probable) future implementations

CSS Box Alignment Module level 3 specificationによると、align-contentはブロックコンテナやmulticolコンテナのブロック軸で動作するはずなので、（ブラウザが実装すれば）flexやgridコンテナと同じように、これらのコンテナのコンテンツをセンタリングできるようになるはずです。

Conclusion