絶対配置(position: absolute;)の要素を中央配置にする方法

当ページのリンクには広告が含まれています。
  • URLをコピーしました!

親要素に対して、縦横(上下左右)を中央に配置する方法です。

topとleftを50%に設定し、子要素(絶対配置されている要素)をtransformのtranslate(-50%, -50%)で調整します。
こうすることで、要素が中央に配置されます。

目次

縦横の中央に配置する

ちなみに、横のみ、縦のみにの中央する場合は下記のようにすることで、それぞれ中央配置されます。

横のみ中央配置にする

縦のみ中央配置にする

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

目次