テキストや要素を簡単に上下中央揃えするCSS

今日は、テキストや要素を簡単に上下中央揃え(縦位置中央揃え)したい時に使えるCSSのご紹介です。

今回の方法は、
「display:flex;」と「align-items:center;」
を使うのがポイントです。

「display:table-cell;」や「 vertical-align:middle;」で縦位置中央揃えできない場合にも使える簡単な実現方法でおススメです。

( 例.1 )

See the Pen flex_01 by Tokiko (@tkksn) on CodePen.

※上記コード中に使用ている指定ダミー画像は、以下サービスを利用しています。
Placeholder.com - Quick & Simple Placeholder Images, Text & More

( 例.2 )

See the Pen flex_2 by Tokiko (@tkksn) on CodePen.

あ、ただこの方法、残念ながら、IE11には使えませんでした。
どうかその点はご了承くださいませ。

以上、ご参考まで。