CSSでblock要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSSのFlexboxを使う方法が現在では一番短いコード量で済みます。中央揃えしたい要素の親に対してたった3行記述するだけです。最新ブラウザはもちろん、Internet Explorer 11（以下、IE 11）でもベンダープレフィックスなしで動作します。

▼ CSS

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

▼ 画像をウインドウの上下中央に配置する例

本記事では、この上下中央揃え方法の使用例、他のレイアウト手法との比較について紹介します。

使い方

次のようなHTML、CSSで実現されるボックスを上下中央揃えすることを考えてみましょう。

▼ HTML

<div class="container">
  <div class="box"></div>
</div>

▼ CSS: コンテナ、ボックスの見た目の設定

.container {
  border: 2px solid #1b0303;
  box-sizing: border-box;
  width: 100%;
  height: 300px;
}
 
.box {
  background-color: #f53838;
  width: 300px;
  height: 200px;
}

.boxを.containerに対して上下中央揃えにするためには、containerに対して3行のCSSコードを追加するだけです。

▼ CSS: 上下中央揃えのためのコード

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

黒枠で囲まれた.containerに対して、赤の.boxが上下中央揃えになっています。

IE 11でも意図通りのレイアウトになっています。

Flexboxにおいてjustify-contentプロパティは主軸方向の並び方を、align-itemsは交差軸方向の並び方を設定します。各々centerを指定することで、直下の要素の上下中央揃えが実現できるのです（Flexboxについて詳しくは末尾の資料を参照ください）。

他の上下中央揃え方法との比較

では、本当にFlexboxによる上下中央揃えが最短なのか、他のレイアウト方法と比較してみましょう。

ネガティブマージンを使うと6行〜4行

よく知られている昔ながらの方法として、ネガティブマージンを使った上下中央揃えがあります。この方法では6行のCSSコードが必要でした。また、Flexboxによる上下中央揃えと違い、ボックスの縦幅・横幅に応じてマージンの値を変更する必要があります。

▼ CSS

.container {
  position: relative;
}
 
.box {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -100px;
}

leftプロパティ、topプロパティ部分にcalc()を用いると、4行になります。

▼ CSS

.container {
  position: relative;
}
 
.box {
  position: absolute;
  left: calc(50% - 150px);
  top: calc(50% - 100px);
}

絶対配置して上下左右を0にすると7行

要素を絶対配置して、上下左右を0にする方法です。この方法では7行のコードが必要です。

▼ CSS

.container {
  position: relative;
}
 
.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

Gridレイアウトを使うと3行だが…

CSS Gridレイアウトを使うと、Flexboxと同じように3行だけで上下中央揃えができます。

▼ CSS

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

ただし、まだユーザーも多いIE 11での対応も考慮に入れると、ベンダープレフィックスが必要です。

▼ CSS（IE 11対応を考慮）

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

以上のように、いずれのレイアウト方法もFlexboxの3行よりも短いコードにはなりません。

Flexboxによる上下中央揃えの応用例

ここからは、Flexboxによる上下中央揃えを使った応用例を見てみましょう。

応用例1: テキストを上下中央揃え

テキストを上下中央揃えする例です。text-alignプロパティやvertical-alignプロパティを用いることなく、テキストが親要素に対して上下中央揃えになります。

▼ HTML

<p class="paragraph">
  こんにちは、鈴木一郎です
</p>

▼ CSS

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

応用例2：全画面に対して要素を上下中央揃えにする

全画面の上下中央に要素を配置する例です。

▼ HTML

<body>
  <img src="images/logo.png" alt="">
</body>

▼ CSS

html, body {
  width: 100%;
  height: 100%;
}
 
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

ウインドウ幅を変えても、配置した画像は常にウインドウに対して上下中央の位置に配置されます。

まとめ

Flexboxによる上下中央揃えは、たった3行で済む点と、ボックスの横幅・縦幅に応じて指定の変更が不要な点において、他のレイアウト手法よりも便利です。IE 11でも問題なく動作するので、実案件でも今すぐ取り入れることができます。ボックスレイアウトを行う場合は、今回の上下中央揃えの手法を積極的に使ってみてはいかがでしょうか？

なお、Fleboxについての基本については次の記事やビデオで詳しく解説していますので参照ください。