本文详解如何通过 css 调整 `position`、`top` 和视口单位（`vh`），精准实现加载进度条及其文字在浏览器窗口垂直居中显示，避免因 `fixed` 定位与 `transform` 混用导致的地图偏移问题。
在网页中实现加载进度条（如顶部细长色条 + 居中提示文字）的垂直居中，关键在于理解定位上下文与视口单位的配合使用。原代码中尝试使用 top: 50%; transform: translateY(-50%) 是常见思路，但失效的根本原因在于：.progress 元素被设为 position: fixed，而 transform 的基准是其自身尺寸——但此时 .progress 高度未显式定义（仅靠子元素撑开），导致 50% 偏移计算失准；更严重的是，fixed 定位会脱离文档流，若页面存在 Google 地图等动态渲染组件，其初始化可能受父容器尺寸影响，从而引发意外位移。
✅ 正确解法：放弃 transform，改用基于视口高度的绝对定位
将 .progress 的 top 设置为 40vh（即视口高度的 40%），可确保整体加载区域稳定悬浮于屏幕中上部——既避开顶部状态栏干扰，又留出足够空间容纳
提示文本与下方进度条。同时需注意以下两点：
-
移除冗余定位声明：原 CSS 中 .progress 同时写了 position: fixed 和 position: absolute，后者会覆盖前者，应统一为 position: fixed（保证始终相对于视口定位），并显式设置 top: 40vh；
-
优化背景一致性：为避免 .progress 区域与页面背景色不一致造成视觉割裂，在 body 中补充 background-color: #f2f2f2（与 .progress 的背景色统一）。
以下是推荐的精简、可靠 CSS 方案：
body {
margin: 0;
padding: 0;
font-family: helvetica;
background-color: #f2f2f2; /* 与进度条背景一致 */
}
.progress {
position: fixed;
top: 40vh; /* 垂直居中的核心：距视口顶部40%高度 */
left: 0;
width: 100%;
z-index: 9999;
text-align: center; /* 确保内部 h1 和 .percent 水平居中 */
}
.bar {
background-color: #819ff7;
width: 0%;
height: 5px;
border-radius: 3px;
margin: 10px auto 0; /* 上下留白，避免紧贴文字 */
max-width: 80%; /* 防止过宽，提升美观度 */
}
.percent {
position: relative;
display: inline-block;
top: 3px;
font-size: 14px;
color: #666;
}? 注意事项：
- 40vh 是经验性取值（兼顾
高度与 .bar 高度），可根据实际字体大小微调（如 35vh～45vh）；
- 若需严格数学居中（即整个 .progress 容器垂直居中），可改用 Flexbox 方案（需包裹一层容器），但本例中 vh 方案更轻量、兼容性更好（支持 IE11+）；
- JavaScript 加载逻辑无需修改，当前 check_element 和 set_ele 已能正常驱动进度动画；
- 确保 是 的直接子元素，避免嵌套在其他定位容器中影响 fixed 行为。
最终效果：加载提示文字清晰居中，进度条平稳位于其下方，Google 地图初始化不再发生偏移，整体体验专业且稳定。
