如何让Spinner组件在屏幕上实现动态居中显示？

问题根源 #

你当前使用position:absolute+calc(50% - 50px)的居中方式存在两个隐患：

1. absolute定位依赖最近的非static定位父元素，如果body或上层容器未设置position:relative，会相对于整个文档流而非视口定位；
2. 若页面内容高度不足100%视口，top:calc(50% - 50px)的基准不是屏幕中心。

修复方案 #

方案1：改用Fixed定位+Transform（最可靠）

直接修改Spinner构造函数中的css样式，用fixed定位绑定视口，配合transform:translate(-50%,-50%)自动居中，无需手动计算元素尺寸：

function Spinner(){
    // ... 其他代码保持不变
    // 替换原cssText行
    Spinner.element.style.cssText='position:fixed;left:50%;top:50%;transform:translate(-50%, -50%);';
    document.body.appendChild(Spinner.element)
}

• fixed定位：始终相对于浏览器视口定位，不受页面滚动或父元素布局影响；
• transform:translate(-50%,-50%)：基于元素自身尺寸反向偏移，完美适配任意大小的Spinner。

方案2：修正Absolute定位的上下文

如果你坚持使用absolute定位，需要给body添加基础样式确保定位基准正确：

1. 在页面的<style>标签或外部CSS文件中添加：

body {
    position: relative;
    min-height: 100vh;
    margin: 0;
}

2. 保持原Spinner的定位样式不变，此时absolute会相对于body（视口高度的容器）居中。

额外修复：动画属性绑定错误 #

你的代码中存在一个隐藏问题：stroke-dasharray和stroke-dashoffset是SVG圆形(circle)的属性，但你错误绑定到了SVG容器(svg)上，导致动画无法正常生效。需要修改Spinner.show和Spinner.hide中的属性设置目标：

// 在Spinner构造函数中，把circle变量改为全局可访问
function Spinner(){
    Spinner.element=document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    // 改为Spinner.circle，让show/hide方法能访问
    Spinner.circle=document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    let c=Spinner.circle; // 保留原变量名不影响后续代码
    // ... 其他代码保持不变
}

// 修改show方法中的属性设置
Spinner.show=function(){
    const c=264,m=15;
    Spinner.element.style.display='block';
    move1();
    function move1(){
        let i=0,o=0;
        move();
        function move(){
            if(i==c)move2();
            else{
                i+=4;o+=8;
                // 改为Spinner.circle
                Spinner.circle.setAttribute('stroke-dasharray',i+' '+(c-i));
                Spinner.circle.setAttribute('stroke-dashoffset',o)
                Spinner.id=setTimeout(move,m)
            }
        }
    }
    function move2(){
        let i=c,o=c*2;
        move();
        function move(){
            if(i==0)move1();
            else{
                i-=4;o+=4;
                // 改为Spinner.circle
                Spinner.circle.setAttribute('stroke-dasharray',i+' '+(c-i));
                Spinner.circle.setAttribute('stroke-dashoffset',o)
                Spinner.id=setTimeout(move,m)
            }
        }
    }
};

// 修改hide方法中的属性重置
Spinner.hide=function(){
    Spinner.element.style.display='none';
    if(Spinner.id){
        clearTimeout(Spinner.id);
        Spinner.id=null
    }
    // 改为Spinner.circle
    Spinner.circle.setAttribute('stroke-dasharray','0 264');
    Spinner.circle.setAttribute('stroke-dashoffset','0')
};

内容的提问来源于stack exchange，提问作者pheromix