前端常用的盒子布局需要了解
接下来我给大家介绍三种
<<<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
}
<<<html沿用上面的html
<<<js
.box{
width: 200px;
height: 200px;
background-color: red;
display:flex
justify-content: center;主轴居中
align-items: center;交叉轴居中
}
.content{
width: 50px;
height: 50px;
}
<<<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
}
原文：https://www.cnblogs.com/luckyjiu9/p/13651435.html