通过布局实现盒子垂直水平居中
大致思想有两种
通过POSITION定位布局实现
通过DISPLAY:FLEX伸缩盒布局实现
Position
.father{
height:100px;
width:100px;
position:relative;
}
.child{
height:10px;
width:10px;
position:absolute;
left:0;right:0;top:0;bottom:0;
margin:auto;
}
或者
.father{
height:100px;
width:100px;
position:relative;
}
.child{
height:10px;
width:10px;
position:absolute;
//50%指父元素的50%,5px为子元素的一半高度,这样正好让子元素垂直居中,50%、减号、5px之间要空格
margin-top:calc(50% - 5px);
//水平居中同理
margin-left:calc(50% - 5px);
//可以写成不同的形式,但是思想相同
}
Display
.father{
height:100px;
width:100px;
display:flex;
justify-content:center;
align-items:center;
}