お手軽にblock要素を上下左右センタリングする(CSSだけ)

1年ぶりくらいにコーディングしてみまして、なんだかんだで使いたくなる上下左右センタリング。昔はネガティブマージンとか使ってせっせとやってたのですが、最近調べてみると画期的に省エネな方法がありました。毎回検索するのも面倒なので自分用の備忘録として残します。

こんな感じにマークアップしているとします。

flexbox_002

CSSはこうなります。

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

お手軽すぎるやろ…!!

私が思う要点は以下の通りです。

こちらの記事で紹介された方法を~~丸パクリ~~参考にさせてもらいました。
たった4行！ CSS3 Flexboxを使った史上最短の上下中央揃え2016年版 – Qiita

flexboxとは

上で書いた通りボックスをフレキシブルにレイアウトするためのモジュールです。
こちらで詳しく書かれています。