これだけは覚えられないのでメモ用に。
margin: 0 auto;やtext-center;などの要素ごとの中央寄せではなく、装飾などで何かしらの要素の特定の箇所に固定しながら表示したい場合に。
目次（クリックでジャンプ）
positionで中央寄せする方法
前提のHTML
以下のようなHTMLを前提として、CSSを記述していきます。
<div class="parent">
<div class="parent__child">
ここに内容
</div>
</div>positionで中央寄せする方法【上下左右】
上下左右（縦横）すべての中央にしたい場合はこのコードを使ってください。
.parent {
position: relative;
}
.parent__child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}positionで中央寄せする方法【上下】
上下のみ中央寄せしたい場合はこちらのコード。
.parent {
position: relative;
}
.parent__child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}positionで中央寄せする方法【左右】
左右のみ中央寄せしたい場合はこちら。
.parent {
position: relative;
}
.parent__child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
