モダンCSSで要素を中央揃えする方法

CSSにおける中央揃えは、本来あるべき姿よりも難しいという評判があります。divにtext-align: centerを試しても、何も動きません。margin: autoを追加すると、要素は水平方向には中央揃えされますが、垂直方向には揃いません。解決策を検索すると5つの異なる答えが見つかりますが、どれもなぜ機能するのかを説明していません。

本当の問題は、CSSには複数のレイアウトコンテキストがあり、それぞれが配置を異なる方法で処理することです。どのコンテキストで作業しているかを理解すれば、中央揃えは簡単になります。以下が今日実際に機能する方法です。

まずレイアウトコンテキストを理解する

手法を選択する前に、1つの質問をしてください:親要素はどのレイアウトシステムを使用していますか?

中央揃えの動作は、フローレイアウト、Flexbox、Gridで異なります。間違ったコンテキストで間違った方法を適用することが、中央揃えが一貫性がないと感じられる理由です。最もよく遭遇する3つのシナリオは次のとおりです:

• ブロック内のインラインコンテンツ(テキスト、リンク)を中央揃えする
• ブロック要素を親要素内で水平方向に中央揃えする
• 要素を水平方向と垂直方向の両方で中央揃えする

text-alignによるインラインコンテンツの中央揃え

テキスト、リンク、その他のインライン要素の場合、親要素にtext-align: centerを指定するだけで十分です:

.card-header {
  text-align: center;
}

これはコンテナ内のインラインコンテンツにのみ影響します。コンテナ自体は移動しません。よくある間違いは、divが位置を移動することを期待してtext-align: centerを適用することですが、移動しません。

margin-inline: autoによる水平方向の中央揃え

ブロック要素を親要素内で水平方向に中央揃えするには、自動マージンを使用します。これを記述する現代的な方法は論理プロパティを使用します:

.content {
  width: 680px;
  margin-inline: auto;
}

margin-inline: autoはmargin-left: auto; margin-right: autoと同等ですが、書字方向を尊重するため、国際化されたレイアウトにとって重要です。これは、ページラッパー、記事コンテナ、フォームを中央揃えするための適切なツールです。要素はコンテナよりも狭くなければならず、自動マージンが分配できる水平方向の残りスペースが必要です。

CSS Flexboxによる中央揃え:水平方向と垂直方向

Flexboxは、コンテナ内のアイテムを配置するための最も実用的なモダンCSS中央揃え手法です。特に複数の子要素がある場合や方向制御が必要な場合に有効です:

.container {
  display: flex;
  justify-content: center; /* 水平方向 */
  align-items: center;     /* 垂直方向 */
  min-height: 100dvh;
}

注意: フルビューポートレイアウトにはheight: 100vhの代わりにmin-height: 100dvhを使用してください。dvh単位は、モバイルでの動的なブラウザUI(アドレスバー、ツールバー)を考慮しますが、100vhは正しく処理しません。動的ビューポート単位は現在、モダンブラウザで広くサポートされており、https://webstatus.dev/features/viewport-unit-variantsで追跡されています。

justify-contentは主軸に沿った配置を制御します。align-itemsは交差軸を制御します。これらを組み合わせることで、寸法に関係なく任意の子要素を中央揃えできます。複数のアイテムを中央揃えする場合や、gapと方向の制御が必要な場合に適切な選択肢です。

CSS Gridによる中央揃え:最短経路

コンテナ内の単一要素を中央揃えする場合、place-itemsを使用したCSS Gridが最も簡潔なオプションです:

.wrapper {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

place-items: centerはalign-items: centerとjustify-items: centerの短縮形です。2つの宣言で両軸の子要素を中央揃えします。1つの要素を中央揃えするだけで、複雑なレイアウトロジックが不要な場合、これが最もクリーンなアプローチです。

また、グリッドアイテムにplace-self: centerまたはmargin: autoを使用して、子要素側から中央揃えを適用することもできます。これは親要素のCSSを制御できない場合に便利です。

どの方法を使用すべきか?

新しいCSS機能に関する注意

CSSアンカーポジショニングを使用すると、要素を別の特定の要素に対して相対的に配置できます。ツールチップ、ポップオーバー、添付UIに便利です。この機能は最近モダンブラウザで利用可能になり、https://webstatus.dev/features/anchor-positioningで追跡されています。ただし、一般的なページの中央揃えについては、FlexboxとGridが今日開発者が使用する信頼できる標準のままです。

まとめ

CSSでの中央揃えは、手法をレイアウトコンテキストに合わせることで、イライラすることがなくなります。フローレイアウトの水平方向にはmargin-inline: autoを、複数のアイテムを配置する場合はFlexboxを、何かを中央に配置するだけの場合はGridのplace-items: centerを使用します。これで実際のフロントエンド作業で遭遇する大部分をカバーできます。

よくある質問

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.