根据布局调整水平垂直居中

    <div class="box">
        <div class="box-content">
        </div>
    </div>

1. flex布局方式

    .box{
        display: flex;
        just-content: center;
        align-items:center;
    }

2. flex+margin

    .box{
        display: flex;
    }
    .box-content{
        margin: auto;
    }

3. 定位+transform

    .box{
        position: relative;
    }
    .box-content{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

4. 定位+margin

    .box{
        position: relative;
    }
    .box-content{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }