盒子居中显示多种方式

    div{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }
   
    div{
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-盒子本身宽度的一半;
        margin-top:-盒子本身高度的一半;
    }
    div{
        //前提是盒子要设置宽度（手动），否则无效
        position:absolute;
        left:0;
        top:0;
        bottom:0;
        right:0;
        margin:auto;
    }
    //父级元素开启弹性布局也可以让子级居中
    div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

盒子居中显示