一、通过display:flex;实现水平垂直居中
【注释:下面这张图片参考自大佬的博客园:https://www.cnblogs.com/ycs5/p/12380728.html】
举例:
CSS:
对应代码:
.box {
/*实现水平垂直居中 start*/
display: flex;
justify-content: center;
align-items: center;
/*实现水平垂直居中 end*/
background-color: pink;
height: 50px;
margin: auto;
width: 50%;
border-radius: 20px;
font-size: 15px;
color: #fff;
}
HTML:
<div class="box">
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
</div>
结果: