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

投稿者 トシ

関連記事

【CSS】ネガティブマージンの使い方【初心者向け】

【CSS】写真と背景色を重ねてずらす表現方法　

【レイアウトの要】中央寄せにするインナーの扱いを覚える

【before・after】疑似要素を使って見出しに線を引く方法

【tableタグ】レスポンシブな会社概要（２列表）の作り方【Flexbox】

【CSS】hoverしたときに別要素の値を変更する方法