CSSで絶対配置の要素、position: absolute; を親要素に対して、中央に配置する方法です。
対象の要素のサイズが固定されていない時は、transform を使う方法が手軽で便利です。
transform で要素の中心点をずらして中央にするイメージです。
下記の様にすることで、上下左右で中央に配置することができます。
目次
HTML構造
|
1 2 3 4 5 |
<div class="box"> <div class="item">中央に配置</div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* 親要素 */ .box{ position: relative; } /* 子要素（中央配置したい要素） */ .item{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } |
ちなみに、横だけ中央にする場合は、下記の様にします。
|
1 2 3 4 5 6 7 |
.item{ position: absolute; left: 50%; transform: translateX(-50%); } |
