第一種方法：

<div class="parent">

</div>

<style>
.parent {
    display: flex;
    width: 100%;
    height: 300px;
    background: #cecece;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

.child {
    background: #000;
    width: 200px;
    height: 100px;
}

</style>

第二種方法：

<div class="x1">
    <div class="x2">
    </div>

</div>

<style>
.x1 {
            width: 1000px;
            height: 1000px;
            position: relative;
            background: #000;
        }
        .x2 {
            width: 20px;
            height: 20px;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            position: absolute;
            background: #fff;
        }
</style>