ブロック要素の縦横ど真ん中に要素を置くためのCSS

CSSに慣れてないころ、こういう感じで縦方向と横方向同時に中央揃えしたいだけなのに

意外と出来なくて困った記憶があります。"縦横中央揃え css"みたいなキーワードで検索しても、「7つ方法があります！」って言って、順に説明してるページがトップに来るので、えっ、どれ…ってなると思う。

今はflexboxがあるから簡単で、その7つ目として紹介されている、

  display: flex;
  justify-content: center;
  align-items: center;

これを追加するだけでOK（IE9なんてもうサポートする必要無いし、サポートが求められるようなプロジェクトからは逃げ出そう）

こちらJSbinのサンプルコード。

だけど結局これも、なんで3行も要るの？justifyってなに？ってなると思うし、正直そう思います...。なんでこんなネーミングになったんだろうflex。

おいすブログ