JavaScript实现目标在窗体中一直居中显示

使用JavaScript实现目标在窗体中一直居中显示

无论如何调整窗体的大小,目标物体都一直会在窗体的中间位置显示

//在left,top位置创建一个球
    function createDiv(left,top) {
        var div = document.createElement("div");
        var styles = div.style;
        styles.width='100px';
        styles.height='100px';
        styles.border='1px solid blue';
        styles.backgroundColor='orange';
        styles.borderRadius='50%';
        styles.position='fixed';
        styles.left=left+'px';
        styles.top=top+'px';
        return div;
    }
    //让球体一直居中显示
    function centerQiu(ele) {
        
        var clientHeight = document.documentElement.clientHeight;
        var clientWidth = document.documentElement.clientWidth;

        var offsetHeight = ele.offsetHeight;
        var offsetWidth = ele.offsetWidth;
        ele.style.top = ((clientHeight - offsetHeight) >> 1)+'px';
        ele.style.left = ((clientWidth - offsetWidth) >> 1)+'px';
    }
    (function () {
        var div= createDiv(0,0);//调用创建球的方法(只存在于内存中,此时页面并不会显示)
        document.body.appendChild(div);//将内存中的球添加为body的子元素尾部

        centerQiu(div);//调用球体居中显示的方法
        window.onresize=function () {//当窗体发生变化时,调用让球体居中的方法
            centerQiu(div);
        }
    })();