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

▼ CSS

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

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

本記事では、この上下中央揃え方法の具体的な使い方を紹介。また、CSSには他にもレイアウト手法があるのであわせて紹介します。では次のページへどうぞ。