CSS------盒子居中4种方式

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;
    }