第一种
<div className="boxOne">
<div className="boxOne_erz"></div>
</div>
.boxOne {
width: 200px;
height: 200px;
background: pink;
display: flex;
justify-content: center;
align-items: center;
}
.boxOne_erz {
width: 50px;
height: 50px;
background: red;
}
第二种
<div className="boxTwo">
<div className="boxTwo_erz"></div>
</div>
.boxTwo {
width: 200px;
height: 200px;
background: purple;
position: relative;
}
.boxTwo_erz {
width: 50px;
height: 50px;
background: yellow;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
第三种
<div className="boxThree">
<div className="boxThree_erz"></div>
</div>
.boxThree {
width: 200px;
height: 200px;
position: relative;
background: red;
}
.boxThree_erz {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
background: yellow;
}
第四种
<div className="boxFour">
<div className="boxFour_erz"></div>
</div>
.boxFour {
width: 200px;
height: 200px;
background: purple;
position: relative;
}
.boxFour_erz {
width: 50px;
height: 50px;
background: yellow;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
第五种
<div className="boxFive">
<div className="boxFive_erz"></div>
</div>
.boxFive {
width: 200px;
height: 200px;
background: aquamarine;
display: flex;
}
.boxFive_erz {
width: 50px;
height: 50px;
background: aqua;
margin: auto;
}
PS:第1、2、5种子级可以不设置高,可以由子级内容自动撑开,感兴趣的同学可以尝试一下哦(*^▽^*)