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;
}