要素を縦中央揃えにする

デザインでよくある縦中央揃え。
cssだけで割と簡単にできます。レスポンシブにも対応できます。

ポイントは外側のレイアウトにdisplay:tableを、要素を囲むレイアウトにdisplay:table-cellを入れて疑似的にtableにしてしまうことです。tableになればvertical-alignが使えるので、middleに指定します。

HTML

CSS

デモページ