水平垂直居中的五种方式

        /* div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】， */
        div{
            width:200px;
            height: 200px;
            background:green;
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-100px;
            margin-top:-100px;
        }
        /* div绝对定位水平垂直居中【margin 负间距】     这或许是当前最流行的使用方法。 */
        div{
            width:200px;
            height: 200px;
            background:green;
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-100px;
            margin-top:-100px;
        }
        /* div绝对定位水平垂直居中【Transforms 变形】*/
        div{
            width: 200px;
            height: 200px;
            background: green;
            position:absolute;
            left:50%;    /* 定位父级的50% */
            top:50%;
            transform: translate(-50%,-50%); /*自己的50% */
        }
        /* css不定宽高水平垂直居中 */
        .box{
            height:600px;
            display:flex;
            justify-content:center;
            align-items:center;
            /* 三句话就可以实现不定宽高水平垂直居中。 */
        }
        .box>div{
            background: green;
            width: 200px;
            height: 200px;
        }
        /* 将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现水平、垂直居中 */
        /*
            table-cell实现居中
            将父盒子设置为table-cell元素，设置
            text-align:center,vertical-align: middle;
            子盒子设置为inline-block元素
        */