思路：父元素position: relative; 子元素通过position: absolute;定位到居中。

结构与基础css（父元素position: relative;）

    <div class="app">
        <div class="box">box</div>
    </div>
    

    .app{
        height: 300px;
        background-color: gray;
        position: relative;
    }
    .box{
        width: 100px;
        height: 100px;
        background-color: red;
    }

方法一

    .box{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -50px;
    }

方法二

    .box{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

方法三

    .box{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
        top: calc(50% - 50px);
    }

方法四

    .box{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto 0;
    }

方法五

利用flex布局，简单快速实现

    .app{
        display: flex;
        align-items: center;
    }