<div class="main">
<h1>Please center me vertically</h1>
</div>
1.基于绝对定位
.main{
position:absolute;
top: 50%:
left: 50%;
width: 10rem;
height: 6rem;
margin-top: -3rem; (6/2=高度/2)
margin-left: -5rem; (10/2 = 宽度/2）
}
弊端：要求元素具有固定的宽度和高度：
2.clac()函数
.main{
position: absolute;
top: calc(50% - 3rem);
left: clac(50% - 5rem);
width: 10rem;
height: 6rem;
}
弊端：要求元素具有固定的宽度和高度：
3.使用Transforms 变形函数
.main{
position: absolute;
top: 50%:
left: 50%;
transform:translate(-50%, -50%);
}
弊端：使用绝对定位对布局影响太大，已经脱离了文档流。如果居中文件高度超过了视口就会被视口切掉
4.基于viewport
.main{
width: 10rem;
padding：1rem 2rem;
margin: 50vh auto 0;
transform: translateY(-50%);
}
弊端：只适用于在视口中居中的场景
5.基于Flexbox
.main{
display:flex;
justify-content:center;
align-item:center;
}
最佳解决方案、主流浏览器已经支持