positionで左右真中に配置

要素の幅が決まっている場合はcalcを使ったほうがラク

position :absolute やposition:fixedで指定した要素を、
左右中央に配置したいと思いました。

今回の私の場合は、pc時に左に固定していたものを
SP時に真ん中にしたいという場面です。

position 指定のときの真中配置は、いろんなサイトでも紹介されています。
おなじみのやり方は

position: absolute;
left: 50%;
transform: translateX(-50%);

ですが、こうやってみました

position: absolute;
left:calc(50vw – 60px);

こっちのほうがラクじゃね?
一行少ないし。
ちなみにこれの60pxとは要素の大きさの半分です。

要素の大きさが決まっている場合は、
calcで中央値を取って、要素の半分移動させたのですから、
多分、これで良いはず。

誰も正解と言ってくれませんが・・・(笑)

正しく動いているので、大丈夫でしょう。

CHATGPTセンセーに聞いてみました

例によって、GPT先生に聞いてみました

質問:positionを使った時の左右真ん中に配置する方法
答え:

div要素を左右中央に配置するために、 margin: 0 auto; を使用することができます。ただし、これは position: static; の要素にのみ適用されます。

もし、 position: absolute;position: fixed; を使って要素を配置する場合は、代わりに次のような方法を使用することができます。

  1. 左右の位置を50%に設定し、要素の幅の半分の負のマージンを追加する方法:

position: absolute;
left: 50%;
transform: translateX(-50%);

  1. flexboxを使った方法:

display: flex;
justify-content: center;

  1. gridを使った方法:

display: grid;
place-items: center;

これらの方法は、異なる状況で使い分けることができます。たとえば、2つの要素を水平方向に中央に配置する場合には、flexboxを使用すると便利です。ただし、要素が複数の列や行に跨っている場合には、gridを使用すると便利です。

なるほど、flexboxを使った真ん中配置の方法は知りませんでした。
でも、なんかこれは、たまたまflexboxを使っている場合に、
使えるよ、っていう技のような気がします。

わざわざ真ん中配置の為に、flexbox指定するかな?

ま、何かの機会に見かけることもあるでしょうから、
覚えておきたいと思います。


コード

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


others

前の記事

ブログを始めます