プログラミング

【CSS】position:absolute で要素を中央寄せする方法をご紹介

スポンサーリンク

ビル中央

今回は、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/

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

スポンサーリンク

-プログラミング
-, , ,

© 2022 サカらいふ Powered by AFFINGER5