1.利用子绝父相对定位方式
<style>
.container{
width: 300px;
height: 300px;
position: relative;
}
.conter{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
2.利用css3的transform，可在未知元素宽高的情况下实现元素的垂直居中
<style>
.container{
position: relative;
}
.conter{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
3.felx布局
<style>
.container{
display: flex;
justify-content: center;
align-items: center;
}
.conter{
}
</style>
标签：居中,盒子,top,50%,垂直,container,position,conter,left From： https://www.cnblogs.com/Nancy9669/p/17027886.html