本文介绍如何通过 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 如何动态变化，用户体验显著提升。

# 加载  # 写了  # google  # 要让  # 推荐使用  # 不受  # 全屏  # 要对  # 浏览器  # css  # 设为  # go  # html  # dom  # transform  # 进度条  # position  # 口中  # 垂直居中  # viewport  # 固定定位 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】