水平垂直居中
水平垂直居中
前端常用的盒子布局需要了解
接下来我给大家介绍三种
1.margin和定位
<<<html
<div class="box">
<div class="content"></div>
</div>
<<<js
.box{
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.content{
width: 50px;
height: 50px;
background: lightblue;
position: absolute;
margin-left: 75px;
margin-top:75px
}
2.弹性盒子
<<<html沿用上面的html
<<<js
.box{
width: 200px;
height: 200px;
background-color: red;
display:flex
justify-content: center;主轴居中
align-items: center;交叉轴居中
}
.content{
width: 50px;
height: 50px;
}
3.定位加margin:auto
<<<html沿用上面的html
<<<js
.box{
width: 200px;
height: 200px;
background-color: red;
position: relative;
position: absolute;
}
.content{
top:0
bottom:0
left:0
right:0
margin:auto
}
