SOURCE

//获取元素
var div = document.querySelector('div');
console.log(div);
var span = document.querySelector('span');
console.log(span);
//封装函数：效果是子绝父相，子级在父级的中心
//使用：调用函数名，再引入选择器就可以
function father_son_center(selector) {
    selector.style.transform = 'translate(-50%, -50%)';
    selector.style.left = '50%';
    selector.style.top = '50%';
}
father_son_center(span);

<div><span></span></div>

div {
    float: left;
    width: 499.9999px;
    height: 400px;
    background: rgb(218, 90, 112);
    position: relative;
}

span {
    width: 50px;
    height: 50px;
    background: rgb(97, 38, 47);
    position: absolute;
    /* left: 50%; */
    /* top: 50%; */
    /* 走的自己的一半 */
    /* transform: translate(-50%, -50%); */
}