cssで縦中央

親{
position: relative;
}

子{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}

勉強させてもらった

• CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ