CSS------盒子居中4种方式
(1)已知宽高的情况
.box{
position:absolute;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-150px;
}
(2)未知宽高的情况
.box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
(3)重复使用定位情况
.box{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}
(4)利用flex属性*<设置元素在flex容器主轴和交叉轴上的对齐方式>*
html,body{
height:100%;
}
body{
display:flex;
justify-content:center;
align-items:center;
}