一些垂直居中的方式

首选

displpay:flex;
justify-content:center;
align-items:center

position:absolute;
top:50%;
left:50%;
height:300px;
width:300px;
margin-top:-150px;
margin-left:-150px;