css

【CSS】文字や画像を画面の中央に配置する一番簡単な方法

画像とかを 画面中央に配置する 一番簡単な方法

文字や画像を画面の天地左右の真ん中に揃えたい時のCSS設定方法を説明します。

左右を揃えるのは比較的カンタンなのですが、天地(上下)の中央揃えがなかなか難儀したりします。

対処方法はいろいろあるのですが、CSSのFlexboxを使うのが一番簡単です。

以下のCSSを設定するだけ。

HTMLはこんな感じ。

最新のChome、Firefox、Operaは問題なく動作しますが、昔のInternet Explorer(9以前)だと正常に動作しないので注意が必要です。

でも、いつまでも古いIEを甘やかしておく必要はないんだと思います。