窗口尺寸调整时加载器内文本居中对齐偏移问题求助

问题产生的核心原因 #

• 所有文本类加载元素（进度百分比、加载提示）全部依赖写死的固定像素top值做垂直定位，比如#loaderTxt固定偏移297px、#loaderPercent固定偏移128px，这种定位和窗口实际高度完全脱钩。调整窗口宽度时，水平方向因为text-align:center规则保持正常居中；但调整窗口高度时，固定偏移值无法匹配新的垂直中心位置，自然会出现偏移。
• 旋转加载环、提示文案、进度数字三个元素是完全独立的分散节点，没有统一的包裹层做位置绑定，全靠手动硬调像素凑出居中效果，没有任何响应式适配能力。
• 旋转加载环本身的定位逻辑混杂了relative、bottom百分比偏移、固定margin的组合规则，和文本元素的位置没有联动关系，高度变化时自身位置也会和文本脱节。
• 最外层的加载容器#loadingDiv设置了top: -50px的负偏移，搭配height:100%的规则，本身的实际可视范围就和预期的全屏覆盖有偏差，进一步放大了位置错位的问题。

可落地的修复方案 #

核心思路是完全抛弃原代码里所有靠硬调像素凑居中的定位逻辑，通过结构调整+弹性盒布局实现自适应居中，具体操作步骤：

1. 调整JS生成的DOM结构，新增一个包裹层把所有加载相关的元素集中到一起，避免节点分散：

   $('html').append(`
   <div id="loadingDiv">
     <div class="loader-wrapper">
       <div class="loader"></div>
       <div id="loaderTxt">Initializing Origins</div>
       <div id="loaderPercent">0%</div>
     </div>
   </div>
   `);
   

2. 替换对应CSS样式，移除所有固定值偏移：
   • 把原#loadingDiv的relative定位改成fixed全屏定位，用inset:0直接占满整个视口，搭配弹性盒实现内部元素的整体居中，删掉原来错位的top:-50px属性：

     #loadingDiv {
         position: fixed;
         inset: 0;
         background: linear-gradient(to top, #2ebf91, #8360c3);
         display: flex;
         align-items: center;
         justify-content: center;
     }
     

   • 新增包裹层的样式，负责把加载环、文案、进度数字做纵向排列、对齐：

     .loader-wrapper {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 1rem; /* 替代原来的固定margin控制元素间距 */
     }
     

   • 移除旋转加载环的所有错位定位属性，只保留旋转动画和外观样式：

     .loader {
         border: 16px solid #f3f3f3;
         border-top: 16px solid #6294f9;
         border-radius: 50%;
         width: 120px;
         height: 120px;
         animation: spin 2s linear infinite;
     }
     

   • 移除两个文本元素所有写死的top偏移、position: relative属性，仅保留文字外观样式：

     #loaderTxt {
         color: white;
         font-size: 32px;
         font-family: 'Do Hyeon', sans-serif;
         font-weight: bold;
     }
     #loaderPercent {
         color: white;
         font-size: 32px;
         font-family: 'Do Hyeon', sans-serif;
         font-weight: bold;
     }
     

3. 调整效果说明：修改后不管窗口宽度、高度怎么变化，整个加载元素组会自动保持在视口的正中心，文本始终和加载环居中对齐，不会再出现高度变化时的位置偏移。

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