CSS

position: absolute;を中央寄せする方法

positionプロパティをabsoluteに指定したときって、どうやって中央に寄せるんだっけ?と意外と覚えられない自分のための備忘録です。なんかposition: absolute;になった時点で配置についてどう考えたらよいか分からなくなってしまいますよね。

左右を中央寄せる方法

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

CSS

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

これは理屈というよりは覚えた方が良いと思います。左右のpositionをゼロにしてmargin: auto;と。

上下を中央に寄せる方法

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

CSS

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

先ほどが左右だったのを上下にしただけです。topとbottomの配置をゼロにして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;
}

上下左右の組み合わせです。知ってしまえばそんなことだったのかという感じですが意外と忘れやすい設定ですので、忘れてしまったときは、またこのページに来てください。

ちなみにコーディングをしていると、上記の方法だとどうしても都合が悪い場面が出てくることがあります。そんなときはtransformプロパティを使った中央寄せも試してみて下さい。

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

CSS

img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;
}

最近の記事

  1. CSS

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

    WordPressの立ち上げからサイト構築までの初期手順
  3. CSS

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

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

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