html简单代码

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

1、定位 + margin负值/margin:auto/transform

.parent{
    width:400px;
    height:400px;
    position:relative;
    background:#f00;
}
//子元素固定宽高且宽高小于父元素 可以用margin负值、margin:auto或transform
//子元素宽高超出父元素 用margin负值或transform
//宽高不固定，用transform
.son{
    height:200px;
    width:200px;
    background:#0f0;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-200px;
    margin-top:-200px;
}
.son{
    height:200px;
    width:200px;
    background:#0f0;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}
.son{
    height:200px;
    width:200px;
    background:#0f0;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

2、table布局

// 父元素不能有flex、浮动等 
.parent{
    display:table-cell;
    vertical-align:middle;
}

3、flex布局

.parent{
    display:flex;
}
.son{
    margin:auto;
}

//或者
.parent{
    display:flex;
    justify-content:center;
    vertical-align:center;
}

4、珊格布局

.parent{
    display:grid;
    place-content: center;
}

详细代码请见codepen