本文详解如何利用 CSS 的 fixed 定位与视口单位（vh）精准实现加载进度条在屏幕中央的垂直居中显示，特别针对 Google Maps 等动态渲染场景——摒弃无效的 body 居中方案，推荐采用 top: 40vh 这一经过视觉校准的微调策略，兼顾标题高度与进度条细长形态，确保进度条稳定悬浮于视口中央、不随滚动偏移、不干扰地图定位，同时提供精简可靠的 CSS 实现与关键避坑提示，让加载体验真正专业而自然。

本文介绍如何通过 CSS 调整 `position`、`top` 和视口单位（`vh`），将固定定位的加载进度条及其文字内容精准垂直居中于整个视口中央，避免受页面滚动或地图渲染干扰。

要让加载进度条（.progress）及其内部标题和进度条（.bar）真正居中于屏幕正中央（而非顶部），关键在于正确理解定位上下文与居中策略。原代码中 .progress 使用 position: fixed; top: 0;，导致其始终锚定在视口顶部；而尝试在 body 上添加 top: 50%; transform: translateY(-50%) 是无效的——因为 body 并非定位上下文，且该写法会破坏全局布局流。

✅ 正确解法是：仅对 .progress 容器应用垂直居中逻辑，并确保其脱离文档流、覆盖全屏但位置可控。

✅ 推荐方案：使用 position: fixed + top: 40vh（微调版居中）

由于 .progress 内含

标题（高度约 60px+）和细进度条（5px），单纯 top: 50% 会使容器中点对齐视口中点，但视觉上标题偏上、整体偏高。因此推荐使用 top: 40vh —— 即距离视口顶部 40% 高度，兼顾标题高度与进度条位置，实测更符合“视觉居中”预期：

.progress {
  position: fixed;
  left: 0;
  width: 100%;
  height: auto; /* 让内容撑开高度，避免遮挡 */
  z-index: 9999;
  top: 40vh; /* 关键：40% 视口高度，比 50% 更自然 */
  text-align: center;
}

? 提示：vh（viewport height）单位基于浏览器窗口高度，不受页面滚动影响，完美适配 Google Maps 等动态渲染内容。

? 同时优化其他细节

• 移除冗余定位声明：原 CSS 中 .progress 重复写了 position: fixed 和 position: absolute，保留 fixed 即可（确保覆盖全屏且不随滚动偏移）；
• 为 body 添加背景色：防止进度条淡出后露出白底闪动，建议统一设为 #f2f2f2；
• 确保文字水平居中：给 .progress 加 text-align: center，并微调 .percent 的 left: 48%（或改用 left: 50%; transform: translateX(-50%) 实现精确居中）。

✅ 最终精简 CSS 片段（推荐直接替换）

body {
  margin: 0;
  padding: 0;
  font-family: helvetica;
  background-color: #f2f2f2;
}

.progress {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 9999;
  top: 40vh;
  text-align: center;
}

.bar {
  background-color: #819FF7;
  width: 0%;
  height: 5px;
  border-radius: 3px;
  margin: 0 auto; /* 水平居中 */
  display: block;
}

.percent {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
}

⚠️ 注意事项

• 不要对 body 或 html 设置 transform: translateY()，这会导致整个页面位移，干扰地图容器定位；
• 避免在 .progress 上设置 height: 100%，否则会强制占满视口，挤压内容并使 top: 40vh 失效；
• 若需严格数学居中（例如容器总高 = 标题高 + 5px 条），可计算后使用 top: calc(50% - (总高度/2))，但 40vh 在多数场景下更简洁鲁棒。

通过以上调整，进度条将稳定悬浮于屏幕中部，无论 Google Maps 如何加载或 DOM 如何动态变化，用户体验显著提升。

终于介绍完啦！小伙伴们，这篇关于《如何让进度条垂直居中对齐》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！