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

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

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>

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

でも、いつまでも古いIEを甘やかしておく必要はないんだと思います。
\ 第三のエックスサーバー /
進化の極限を目指した 「エックスサーバー」の新たなカタチ。

「シン・レンタルサーバー」は、エックスサーバーのシステムをベースとしつつ、最新技術を盛り込んだ国内最速のレンタルサーバーです。
エックサーバーとの違いは、「スピード」「リソース確保」「アダルティサイト可能」。
それでいてこの価格。
ブログをこれから始める人も、他社サーバーからの乗り換えの人も超絶おすすめなレンタルサーバーです。

しかも、今ならドメインが無料!

CSS
スポンサーリンク
\気になるあの子に教えてあげよう/
Tamoc

コメント

タイトルとURLをコピーしました