【CSS】「position: absolute」を中央寄せする

つまずいたのでメモ。

「absolute」指定したはいいけど、中央に寄せるのってどうやるんだっけ？ということがありました。

広告

上下中央にする

「top、bottom」を「0」指定した上で「margin: auto」を指定すると上下中央に配置されます。

左右中央にする

先程の「top、bottom」を「right、left」にしただけです。

左右中央に配置されます。

上下左右中央にする

「top、right、bottom、left」全てを指定すると上下左右中央に配置されます。

「transform」を使う

「transuform」でも同じように配置できます。

要素を中央から配置にして、上下左右の座標を半分移動させる方法です。

こっちのほうが個人的にはコードが分かりやすい。

覚えておくと役にたつかも……？

以上です、お疲れさまでした！

広告