Css 居中的4个常用方法

 /*1.最简单实现水平居中--不过要设置宽度*/
    /*margin: 0 auto;*/
    /*text-align:center*/

    /*2.position transform */
    .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    /*3.flex布局*/
    .box {
        display: flex;//flex布局
        justify-content: center;//使子项目水平居中
        align-items: center;//使子项目垂直居中
    }