• 拿来即食
<!DOCTYPE html><html><head><meta charset=’utf-8‘>
<style>
    html, body{position:relative;width:100%;height:100%}
    div{position:absolute; width:200px;height:200px}
</style>
<head><body>
    <div>Hello World</div>
<body></html>
<script>
function $(tag){return document.querySelector(tag)}

function center(chi,par,typ){
    x = (par.clientWidth-chi.clientWidth)/2+'px';
    y = (par.clientHeight-chi.clientHeight)/2+'px';
    chi.style.left=typ=='tb'?chi.offsetLeft+'px':x;
    chi.style.top=typ==undefined?chi.offsetTop+'px':y;
}; 

center($('div'),$('body'))
</script>
  • center()的typ参数
不填(undefined)   --- 左右居中
'tb'              -  上下居中
其他任意字符如''    --  全局中
  • 补充说明: 子标签必须为absolute,父标签position必须非默认值; 非响应式居中，响应式要补充:
window.onresize=function()
{　　// 再执行一遍
    center($('div'),$('body'))
}