【css】文字や画像を画面の中央に配置する一番簡単な方法【2026年最新版】

cssで文字や画像を画面の天地左右の真ん中に揃えたい時の設定方法です。

左右を揃えるのは比較的簡単ですが、天地（上下）の中央揃えがなかなか難儀したりします。

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

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

HTMLはこんな感じ。

<div class="container">
<img src="hoge.png">
</div>

【2026年8月更新】Flexboxは、Chrome・Firefox・Safari・Edge等、現在使われている主要ブラウザで全て問題なく動作します。かつてはInternet Explorerでの対応状況を気にする必要がありましたが、IE自体が2022年6月にサポート終了しているため、現在はブラウザ対応を気にせず使って問題ありません。