html：

<div class="parent">
    <div class="child"></div>
</div> 

<style>
    /*第一种方法*/
    /*.parent {*/
        /*width:500px;*/
        /*height:500px;*/
        /*border:2px solid #000;*/
        /*position:relative;*/
    /*}*/
    /*.child {*/
        /*width:230px;*/
        /*height:200px;*/
        /*margin: 0 auto;*/
        /*margin: auto;*/
        /*position: absolute;*/
        /*top: 0; left: 0; bottom: 0; right: 0;*/
        /*background-color: red;*/
    /*}*/

    /*第二种方法*/
    /*.parent {*/
        /*width:800px;*/
        /*height:500px;*/
        /*border:2px solid #000;*/
        /*display:table-cell;*/
        /*vertical-align:middle;*/
        /*text-align: center;*/
    /*}*/
    /*.child {*/
        /*width:200px;*/
        /*height:200px;*/
        /*display:inline-block;*/
        /*background-color: red;*/
    /*}*/
    /*第三种方法(不支持此写法，兼容问题)*/
    /*.parent {*/
        /*width:800px;*/
        /*height:500px;*/
        /*border:2px solid #000;*/
        /*display:flex;*/
        /*justify-content:center;*/
        /*align-items:center;*/
    /*}*/
    /*.child {*/
        /*width:200px;*/
        /*height:200px;*/
        /*background-color: red;*/
    /*}*/
    /*第四种方法（支持）*/
    .parent {
        width:800px;
        height:500px;
        border:2px solid #000;
        position:relative;
    }
    .child {
        width:300px;
        height:200px;
        margin:auto;
        position:absolute;/*设定水平和垂直偏移父元素的50%，再根据实际长度将子元素上左挪回一半大小*/
        left:50%;
        top:50%;
        margin-left: -150px;
        margin-top:-100px;
        background-color: red;
    }
</style>