如何将加载Spinner固定显示在用户屏幕中心而非页面中心？

嗨，这个问题我之前也碰到过！你现在用的是position: absolute定位，它是相对于整个文档流来计算位置的，所以当页面很长、你滚动到底部时，Spinner就跑到页面上方的可视区域外了。咱们只需要调整几个CSS属性，就能让它牢牢固定在用户的屏幕中心，不管页面怎么滚动都能看见～

核心修改点 #

• 把Spinner的定位方式从absolute改成fixed：fixed定位的元素是相对于浏览器视口（也就是用户当前看到的屏幕区域）来定位的，不会随着页面滚动而移动。
• 调整居中方式：用transform: translate(-50%, -50%)来实现完美居中，比用margin计算更灵活，适配不同尺寸的Spinner。
• 优化遮罩层的尺寸：把遮罩层的height: 100vw改成height: 100vh，确保它能完全覆盖整个视口高度。

修改后的CSS代码

#spinner-bg-loading{
    position: fixed; /* 关键：改成fixed定位 */
    left: 50%;
    top: 50%; /* 定位到视口的50%位置 */
    width: 80px;
    height: 80px;
    border: 16px solid #FFFFFF;
    border-radius: 50%;
    border-top: 16px solid #1F3A51;
    animation: spin 2s linear infinite;
    z-index: 10000;
    transform: translate(-50%, -50%); /* 向左向上移动自身的50%，实现完美居中 */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#spinner-bg {
    height: 100vh; /* 改成100vh，覆盖整个视口高度 */
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed; /* 遮罩层也改成fixed，确保覆盖整个视口 */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: none;
}

对应的HTML代码（结构无需改动）

<div id="spinner-bg">
    <div class="container d-flex align-items-center">
        <div class="spinner-borderX" role="status">
            <span class="sr-only" id="spinner-bg-loading"></span>
        </div>
    </div>
</div>

这样修改之后，不管你滚动到页面的哪个位置，Spinner都会稳稳地显示在你当前看到的屏幕正中央，遮罩层也会完全覆盖整个可视区域，不会出现滚动后遮罩不全的问题～

备注：内容来源于stack exchange，提问作者quatrol