HTMLの要素を中央に配置したいときって度々ありますよね
そんなとき私がよく使用する方法を紹介します！
<div class="parent">
<div class="child"></div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
以上！
解説
topやleftは親要素を基準に計算します
left: 50%;
それとは対照的に、transform: translate()は自身を基準に計算します
transform: translateX(-50%);
これを組み合わせることでセンタリングを実現しているわけです！
いろいろな制約により使用できない場合はありますが、
お役に立ったら嬉しいです！