position:absolute で要素を中央寄せにする方法

今回は、CSSにおける、「position:absolute」の中央寄せをご紹介します。

＊親要素に対する「relative」の記述は省略します。

左右（横方向）における中央寄せ

子要素{
position: absolute;
left: 0;
right: 0;
margin: auto;
}

上下（縦方向）における中央寄せ

子要素{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}

上下左右ともに中央寄せ

子要素{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

注意点

position: relative;　の確認

これは初歩的な注意点ですが。

position: absolute;とposition: relative;をセットで使います。

そのとき、これ（relative）ってどこに設定すればいいの？

とふと疑問に思った人もいるかと思います。

position: relative;は親要素に設定します。

ですので、position: absolute;を設定したのに、うまくいかない人は、position: relative;が、ちゃんと親要素に設定されているか、親要素以外に設定されていないか、再度確認してみてください。

50％の落とし穴

基準点からの距離を「％」でも指定できます。

しかし、

「中央寄せだから、left:50%;（あるいは top:50%;）だよね。簡単じゃん。」
と思ってしまいそうですが、left:50%;とだけ設定しても、中央にはきません。

See the Pen
position-only50% by t.h (@tomtom15)
on CodePen.

上のコードは、青と赤の境目が中央です。

しかしleft:50%;を設定したのに、黄色のボックスは赤のゾーンに入っています。

なぜか。

position: absolute;は、動かしたい要素（黄色のボックス）の「左上の角」が基準になるんです。

なので、　left:50%; を設定して中央にくるのは、動かした要素の「左上の角」なんです。

ご覧のとおり、中央より右寄りですよね。

ですから、動かしたい要素（黄色のボックス）を中央に位置するためには、left:50%;　を設定した後に、

動かした要素の「大きさの半個分」を、左にずらさないといけません。

要するに黄色ボックスのwidthの半分だけ、左にずらすんです。

そのために、transform: translateX(-50%);　（縦方向ならXをYに変えます。）を　left:50%;　の下に追記しましょう。

See the Pen
position-L50%-50% by t.h (@tomtom15)
on CodePen.

そうすると、中央に来ます。

まとめ

いかがでしたしょうか。

positionの仕組みを理解すると、いろいろなケースで応用がきくようになります。

もっと詳しい記述が知りたい方はこちらをどうぞ。

https://cotodama.co/position-absolute-center/

(すごく丁寧な説明をしてくれているのでとてもわかりやすいです)

中央寄せの記事をまとめたのでこちらも参考にしてください。