高さが不定な要素の天地中央に画像やテキストを配置するcss

レスポンシブサイト制作で頻出する天地中央に配置したい問題を簡単に解決できるかもしれないテクニックです。

cssは簡単で以下になります。

.天地中央にしたい要素に{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

実際に実装してみましょう。実装の際はベンダープレフィクスの記述を忘れずに追加しましょう。

See the Pen qaVzgW by hoshu_t (@hoshu_t) on CodePen.

transformが便利ですね。研究次第で他にも色々なことができそうです。
何かわかればまたここに書こうと思います。