CSS WEB制作

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

center

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

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

 

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

text-center
【CSS】要素を中央に寄せるテクニック6選 場面によって使い分けよう

続きを見る

-CSS, WEB制作
-,

© 2024 人生フリーハンド Powered by AFFINGER5