CSS

画像や要素を上下左右の中央に配置する方法

画像や要素を親要素のど真ん中、つまり上下左右の中央に配置したいときってあると思います。そんなときに使える便利なスタイルシートを2つご紹介します。

方法1:position: absolute;margin: auto;

結論から見てみましょう。今回は画像を中央寄せしてみました。

ボタンで表示を切り替えてご覧ください。

See the Pen img_center01 by kenichi (@ken81) on CodePen.

CSS

img{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

理屈は抜きにして、とりあえず要素を中央に配置したいという方は上記のプロパティと値をそのまま使えば中央配置が可能です。

この方法が上下左右に中央配置される理由

これはそういうものだと思ってもらうしかない感じではありますが、ヨコに関してもタテに関しても次の条件がそろったとき中央に配置される仕組みになっています。

  1. position: absolute;である。
  2. top, bottom, right, leftの値がauto(初期値)でない。
  3. marginが左右上下にautoである。

top, bottom, right, leftの値が「0」なのは初期値「auto」を解除させる目的です。画像が中央に配置された直接的な要因はmargin: auto;によって上下左右のmarginを「auto」にしたことにあると覚えておきましょう。

方法2:display: flex;

2つ目の方法は中央寄せしたい要素の親要素にdisplay: flex;と一連のプロパティを指定する方法です。

See the Pen img_center02 by kenichi (@ken81) on CodePen.

CSS

.wrap {
  height: 183px;
  display: flex;
  justify-content: center;
  align-items: center;
}

セレクタがimgではなくてその親要素になっている点にご注意ください。flexboxというのは親要素にdisplay: flex;を指定することで、子要素に対していろんな配置が指定できる便利なレイアウトモジュールです。こちらの方が感覚的に分かりやすいプロパティになっているのが分かると思います。

ただし、高さの指定がないと上下の中央寄せができませんので、heightの値はそれぞれ任意の値を入れましょう。もしかしたら、「flex」という値を初めて見たという方もいるかもしれないので、良かったら下記の記事も参考にしてみてください。flexboxはすごい便利ですよ。

最近の記事

  1. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  2. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  3. CSS

    CSS|中央寄せが効かないときは・・・
  4. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  5. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
PAGE TOP