1：利用子绝父相定位的方式来实现
<style>
div {
position: relative;
width: 200px;
height: 200px;
background-color:pink;
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
background-color:skyblue;
}
</style>
2：利用CSS3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中
<style>
div {
position: relative;
width: 200px;
height: 200px;
background-color:pink;
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
background-color:skyblue;
background-color:skyblue;
}
</style>
3：利用flex来实现
<style>
div {
width: 200px;
height: 200px;
pink;
display: flex;
justify-content: center;
align-items: center;
}
p {
width: 100px;
height: 100px;
background-color:skyblue;
}
</style>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
