画像を上下中央揃えさせる方法はいくつもありますが、完璧な方法はありませんでした。その中でも一番、完璧に近い方法がありましたので紹介します。

http://codepen.io/sebastianekstrom/full/kzEhe

一行でも、数行にわたる文字でも、画像でも上下中央を実現しているのを見て頂けたと思います。しかも、全て同じコードで実現出来てしまいます。では具体的なコードです。

文字の場合

CSSのコード

注意:高さを設定しておかないと、枠をはみ出てしまい正常に上下中央に表示されません。

HTMLのコード

以上です。

画像の場合

念の為、画像の上下中央揃えのコードも書いておきます。

CSSのコード

注意:高さを設定しておかないと、枠をはみ出てしまい正常に上下中央に表示されません。

HTMLのコード