【CSS】「position: absolute」を中央寄せする
- 2019.12.15
- HTML / CSS

つまずいたのでメモ。
「absolute」指定したはいいけど、中央に寄せるのってどうやるんだっけ?ということがありました。
広告
上下中央にする
「top、bottom」を「0」指定した上で「margin: auto」を指定すると上下中央に配置されます。
左右中央にする
先程の「top、bottom」を「right、left」にしただけです。
左右中央に配置されます。
上下左右中央にする
「top、right、bottom、left」全てを指定すると上下左右中央に配置されます。
「transform」を使う
「transuform」でも同じように配置できます。
要素を中央から配置にして、上下左右の座標を半分移動させる方法です。
こっちのほうが個人的にはコードが分かりやすい。
覚えておくと役にたつかも……?
以上です、お疲れさまでした!
広告
-
前の記事
【CSS】「background-color」(背景色)を「無し」にする 2019.12.08
-
次の記事
【CSS】グリッドを使いたい。「display:grid;」の基本 2019.12.21