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

左右を中央寄せる方法

CSS

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

上下を中央に寄せる方法

CSS

先ほどが左右だったのを上下にしただけです。topとbottomの配置をゼロにしてmargin: auto;ですね。

左右上下ともに中央配置する方法

CSS

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

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

CSS