【css】position:fixedで中央に行かない時

公開日:2019年11月16日 2021年9月24日更新

Categoryweb制作

ブラウザ上で、中央表示に時折使う「position:fixed」だが、思ったように中央に行かない。微妙に左右にずれる。
そんな時の備忘録。

座標の中心は左上でした

多分これでほぼ解決。

position: fixed;
left: 50%;
top:50%;

これだけだとブラウザの中心に来るのが要素の左上なので、

position: fixed;
left: 50%;
top:50%;
margin: -200px 0px 0px -200px;

上左に要素の半分分、marginを取る。
※これは縦横400pxの画像を使う場合。

positionをfixedさせて、上左50%づつmargin取ってるのに何故中央に行かない…?というときに。

特に、ローダーとか小さい画像だとモヤモヤしそうなので、忘れないように。でもまあ、今どきはローダーはcss使うか。