CSSで要素を中央に配置する方法まとめ｜水平・垂直センタリングを徹底解説

CSSで要素を中央に配置するのは、意外と難しく感じられることが多いものです。特に、水平方向と垂直方向の両方で中央揃えが必要な場合はなおさらです。この記事では、モダンなCSSの手法から、少し古いけれど今でも役立つテクニックまで、中央揃えの方法をわかりやすく解説します。

テキスト要素を水平方向に中央揃えする

テキストを水平方向に中央揃えするのはシンプルです。text-align プロパティに center を指定するだけです。

h1 {
  text-align: center;
}

この指定は、あらゆるテキスト要素に対して機能します。

ブロック要素（非テキスト）を水平方向に中央揃えする

テキスト以外の要素を水平方向に中央揃えしたい場合は、margin プロパティの左右に auto を指定します。併せて、要素の幅（width）も指定する必要があります。

.center-horizontal {
  margin-left: auto;
  margin-right: auto;
  width: 100px; /* または max-content; */
}

ポイント： 固定幅を指定したくない場合は、width: max-content を使うと、要素がコンテンツの幅に合わせて自動的に拡張されます。

ブロック要素とインラインブロック要素の違い

上記の .center-horizontal クラスはブロック要素には有効ですが、インライン要素には効きません。HTMLでは、一部の要素がデフォルトでインライン要素として扱われます。たとえば <button> 要素は、デフォルトで display: inline-block のスタイルを持っています。

ただし、CSSクラスに display: block; を追加するだけで、簡単にブロック要素へ変更できます。

.center-horizontal {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px; /* または max-content; */
}

これで、どんな要素に対しても中央揃えが機能するようになります。

Flexboxで水平方向に中央揃えする

モダンなFlexboxを使えば、水平方向の中央揃えは非常に簡単です。先ほどの .center-horizontal クラスを次のように書き換えてみましょう。

.center-horizontal {
  display: flex;
  justify-content: center;
}

これで <div> 要素は中央に配置されます。ところが、ボタン要素はうまく中央揃えされません。なぜでしょうか？

実は <button> 要素は特殊な要素で、<div> とは異なり、いわゆるフレックスコンテナ（flex-container）になることができないのです。

しかし、ボタンはフレックスアイテム（flex-item）になることはできます。つまり、ボタンをフレックスコンテナの中に入れれば、中央揃えが機能します。次のHTMLをエディタに追加してみてください。

<div class="center-horizontal">
  <button>Center me</button>
</div>

今度はうまくいきました！ ボタン要素から中央揃え用のクラスを外し、代わりに親となるラッパー <div> コンテナに適用しただけです。

ヒント： <img> 要素もフレックスコンテナにはなれませんが、ボタンと同じようにフレックスアイテムとしては機能します。

要素を垂直方向に中央揃えする

CSS初心者がつまずきやすいのが、垂直方向の中央揃えです。Flexboxを使えば簡単ですが、まずは従来のCSSメソッドでのやり方を見てみましょう。

margin-top や margin-bottom に auto を指定すればいいのでは？ と思うかもしれませんが、残念ながらそれはできません。

垂直方向の中央揃えを機能させるには、高さが指定された親コンテナが必要です。次のHTMLをエディタに追加してください。

<section class="section">
  <div class="center-vertical">Center me vertically</div>
</section>

親要素である section クラスに、次のCSSを追加します。

.section {
  height: 200px;
  border: 1px solid black;
}

枠線（border）は、動作を視覚的に確認しやすくするためのものです。

続いて、子要素に次のCSSを追加します。

.center-vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

これで完成です！

Flexboxで垂直方向に中央揃えする

Flexboxで垂直方向に中央揃えするには、親要素をフレックスコンテナにします。前の例の子要素から center-vertical クラスを削除して、.section クラスに次の2つのFlexboxプロパティを追加しましょう。

.section {
  height: 200px;
  border: 1px solid black;
  display: flex;
  align-items: center;
}

これで、子要素がFlexboxによって垂直方向に中央揃えされました。

要素を垂直・水平の両方向に中央揃えする

垂直・水平の両方向に中央揃えするには、いくつかのプロパティを追加するだけです。まずは従来のCSSメソッドから見てみましょう。

最初に、次のマークアップを追加します。

<section class="section">
  <div class="center-vertical-and-horizontal">
    Center me vertically &amp; horizontally
  </div>
</section>

そして、対応するCSSはこちらです。

.section {
  height: 200px;
  border: 1px solid black;
}

.center-vertical-and-horizontal {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
}

ご覧のとおり、これは先ほどの「Flexboxなしで垂直方向に中央揃えする」例とよく似ています。違うのは、left: 50% の宣言を追加した点と、transform プロパティでX軸・Y軸の両方を一度に指定している点（(-50%, -50%)）です。最初の値がX軸、2番目の値がY軸を表します。

Flexboxで垂直・水平の両方向に中央揃えする

最後に、同じことをFlexboxで実現してみましょう。子要素から center-vertical-and-horizontal クラスを削除し、.section クラスに次のCSSを使用します。

.section {
  height: 200px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

先ほどの「垂直方向のみの中央揃え」との違いは、justify-content: center; の宣言があることだけです。この宣言が水平方向の中央揃えを担当しています。

CSS Gridで水平・垂直の両方向に中央揃えする

おまけとして、さらに新しいCSS Gridプロパティで垂直・水平の中央揃えを行う方法も紹介します。.section クラスを次のように書き換えてください。

.section {
  height: 200px;
  border: 1px solid black;
  display: grid;
  place-items: center;
}

たった2つのプロパティ（display: grid と place-items: center）だけで、CSS Gridによる中央揃えが完了します。とても便利ですね！

ただし残念ながら、CSS Gridはすべてのモダンブラウザで完全に互換性があるわけではなく、WordPressなど多くの人気CMSやフレームワークでも、まだ100%動作するとは限りません。

CSS Gridの現在のブラウザ対応状況は、Can I useなどのサイトで確認できます。