CSS水平垂直居中
- 使用flex布局
<div class="content">
<div class="box">
</div>
</div>
.content{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
【注意】若垂直居中失效,是因为content盒子缺少高度,height:100%无法撑开盒子
<div class="content">
<div class="box">
</div>
</div>
.content{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
【注意】若垂直居中失效,是因为content盒子缺少高度,height:100%无法撑开盒子