vh, vwを使って上下左右中央揃えを実現する方法

個人的に結構クリビツテンギョウのK点超えだったので記録しておきたいと思います。

以前こちらのICS MEDIAさんの記事を拝見して「おーめちゃ便利や！」と思ったのですが、親要素のheightもついでに画面いっぱいにできればなあ…と考えておりました。結論を先に言うと、 vh, vwを使うとうまくできるようです。
上下中央揃えのCSSまとめ。Flexboxがたった3行で最も手軽

簡単に意味について説明しておくと、以下のような値を持つプロパティです。

• vh … viewportのうちどのくらいの割合をheightとして持つか（1/100単位）
• vw … viewportのうちどのくらいの割合をwidthとして持つか（1/100単位）

vmaxがIE11でサポートしていない以外は、主要なブラウザでサポートされているプロパティです。
https://caniuse.com/#search=Viewport%20units

サンプルはCodePenに置いておきます。

See the Pen Centering elements without JS by FumiyaShibusawa (@smartponzu) on CodePen.

書き方

.foo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

height: 100vh;を書くことによって、画面いっぱいに高さを確保することができます。これだけ！

※position: absoluteを使うパターン

ちなみに冒頭のCodePenのサンプルでは、モーダルを表示するときの半透明のシャドウにもこのテクを使っています。position: absoluteの場合、top: 0; width: 100vw;を明示的に指定して、左上端から画面いっぱいに表示幅を確保しています。

.foo {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw; // これを書くことでwidthも画面いっぱいに確保される！
}

こんなとき便利

• Codepenとかで要素がはじっこにあるの嫌だから中央揃えしときたいとき
• モーダルを中央に表示したいとき

注意事項

display: flexを使うと当然子要素の振る舞いも変わります。ので、必ずしもこの方法が中央揃えを使うベストな方法とは限りません。

例えばtransform: translate(-50%)を使う方法だってあるし、display: table-cell; vertical-align: middleや、top: 0; left: 0; margin: auto; の合わせ技とかもあったりします。ので、その時々にあったCSSを書くと幸せになれるかもしれません。