親要素に対して、縦横（上下左右）を中央に配置する方法です。
topとleftを50%に設定し、子要素（絶対配置されている要素）をtransformのtranslate(-50%, -50%)で調整します。
こうすることで、要素が中央に配置されます。
目次
縦横の中央に配置する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.sample { position: relative; } .sample .sample-child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } |
ちなみに、横のみ、縦のみにの中央する場合は下記のようにすることで、それぞれ中央配置されます。
横のみ中央配置にする
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.sample { position: relative; } .sample .sample-child { position: absolute; left: 50%; transform: translate(-50%, 0); } |
縦のみ中央配置にする
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.sample { position: relative; } .sample .sample-child { position: absolute; top: 50%; transform: translate(0, -50%); } |
