absolute × transform
コピペして使う用の記事です。
flexやmargin:auto;などで中央寄せも出来ますが、この手法は擬似要素などを中央寄せする際にとても便利です。
.wrapper{width:100%;position:relative;}.inner{position:absolute;top:50%;left:50%;transform:translateY(-50%)translateX(-50%);/* transformがセンタリングしたい要素の縦、横幅分を引いてくれるので中央になる */}
wrapperの上下中央にinnerが配置されます。