CSSで画像を上下左右中央配置にする方法３選

CSSを使って画像を中央寄せにしたいけどやり方がよくわからない

そんな悩みにお答えします。

要素をブロックの上下左右中央に配置するというケースはたくさんあります。

横だけの中央揃えなら「margin:0 auto」か「text-align:center」を使っておけば大丈夫です。

ですがそこに縦がからむと「あれ、どうするんだっけ？」ってなる場合があります。

そこで今回はCSSで画像を上下左右中央配置にする方法を３つ紹介します。

<div class="container">
  <img src="img/1.jpg">
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
  background-color: #dcdcdc;
}

「display: flex;」「justify-content: center;」「align-items: center;」のたった３行で上下左右中央配置ができてしまうFlexboxはほんと便利ですね。

現状これが一番おすすめできる方法です。

.container {
  position: relative;
  height: 600px;
  background-color: #dcdcdc;
}

.container>img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container {
  display: grid;
  place-items: center;
  height: 600px;
  background-color: #dcdcdc;
}

まとめ：上下左右中央配置をマスターしよう

IE 11の対応が必要な場合は「display: grid;」は使えないので、現実的には「display: flex;」か「position: absolute;」を使うことになると思います。

どちらでも簡単に中央寄せが実現できます。

自由自在に使いこなしましょう。

• Twitter
• Facebook

投稿者 トシ

関連記事

画像だけインナー幅からはみ出して画面いっぱいに広げる方法

【初心者】position「relative」「absolute」を理解する方法

CSSで背景画像を暗くする２つの方法

【徹底解説】transitionプロパティの使い方をマスターしよう！【CSS】

【CSS】背景画像を複数重ねて表示する方法

【Flexbox】デスクトップでは横、スマホでは縦に並ぶナビゲーションの作り方