今回は、CSSにおける、「position:absolute」の中央寄せをご紹介します。
*親要素に対する「relative」の記述は省略します。
クリックできる目次
[1]左右(横方向)における中央寄せ
子要素{
position: absolute;
left: 0;
right: 0;
margin: auto;
}
[2]上下(縦方向)における中央寄せ
子要素{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
[3]上下左右ともに中央寄せ
子要素{
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%;) だよね。簡単じゃん。
と設定しても、うまくいかない人もいるはずです。
このposition: absolute;
は、動かしたい要素の「左上の角」が基準になるんです。
なので、 left:50%; を設定して、中央にくるのは、動かした要素の「左上の角」なんです。
left:50%; だと、下のように、「あれ、右寄りじゃん」と感じる(というか、そうなっている)はずなんです。
@@@@@@@@@@(親要素)
子子子子子子(子要素)
ですから、本当の意味で(というとちょっとおかしいですが)中央に位置するためには、
left:50%; を設定した後に、
動かし要素の「大きさの半個分」を、左にずらさないといけません。
そのためには、
transform: translateX(-50%); (縦方向ならXをYに変えます。)
を left:50%; の下に追記しましょう。
@@@@@@@@@@@@(親要素)
子子子子子子(子要素)
そうすると、中央に来ます。
まとめ
以上3つ方法を紹介しました。
いかがでしょうか。
簡単ですよね。
もっと詳しい記述が知りたい方はこちらをどうぞ。
https://cotodama.co/position-absolute-center/
(すごく丁寧な説明をしてくれているのでとてもわかりやすいです)