CSS Flexboxで要素を上下左右（垂直・水平方向）に中央揃えする方法

CSSのFlexbox（フレックスボックス）を使えば、要素を垂直方向・水平方向の両方で簡単に中央揃えできます。従来のようなfloatやpositionのテクニックに比べてコードがシンプルになり、可読性や保守性も大きく向上します。この記事では、Flexboxによる中央揃えの基本から実際の実装例までを解説します。

Flexboxで中央揃えを行う基本の考え方

Flexboxでの中央揃えは、親要素（フレックスコンテナ）に対してスタイルを指定するのがポイントです。子要素そのものに位置調整のCSSを書く必要はありません。

.container {
  display: flex;
  justify-content: center; /* 水平方向（主軸）の中央揃え */
  align-items: center;     /* 垂直方向（交差軸）の中央揃え */
}

各プロパティの役割

1. display: flex

親要素をフレックスコンテナとして設定し、直下の子要素をフレックスアイテムとして扱えるようにします。これがFlexboxレイアウトの起点となる指定です。

2. justify-content: center

主軸（デフォルトでは水平方向）に沿って、子要素を中央に配置します。横方向のセンタリングを担当します。

3. align-items: center

交差軸（デフォルトでは垂直方向）に沿って、子要素を中央に配置します。縦方向のセンタリングを担当します。

実装例：画面中央に要素を配置する

<div class="container">
  <div class="box">中央に表示される要素</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* ビューポート全体の高さを基準に */
}

height: 100vh を指定することで、画面全体を基準とした「ど真ん中」に要素を配置できます。モーダルやローディング画面など、さまざまな場面で応用できる定番テクニックです。

まとめ

Flexboxを使った中央揃えは、たった3行のCSSで実現できます。display: flex＋justify-content: center＋align-items: center の組み合わせさえ覚えておけば、垂直・水平方向のセンタリングで悩むことはほぼなくなるでしょう。

以下は動画内でも紹介しているCodePenのデモです。実際にコードを編集しながら、中央揃えの挙動を手軽に確認できますので、ぜひ試してみてください。