position: absolute ;や position: fixed; で横や縦を中央に配置したい場合があります。
要素の幅をあらかじめ決められる場合は、簡単に指定が可能ですが、レスポンシブデザインが主流の現在では、固定幅にすることは難しくなってきています。
その場合、「transform: translateX／translateY」を使用すること簡単に中央配置にすることができます。
横方向だけ中央にしたい場合
|
1 2 3 4 5 6 7 8 9 10 11 |
.parent { position: relative; } .child { position: absolute; left: 50%; transform: translateX(-50%); } |
縦横どちらも中央にしたい場合
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } |
