如何将加载进度条及文本居中显示在屏幕中间？

你给body添加top:50%; transform: translateY(-50%);会影响页面其他元素（比如Google Map），且无法实现进度条和文本居中。问题出在错误修改了全局body样式，应该针对进度条容器.progress内部元素做布局调整。

具体修改方案 #

修改.progress及相关元素的CSS样式，用Flex布局实现内部元素垂直水平居中：

.progress {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #F2F2F2;
  /* 添加Flex布局属性实现居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bar {
  background-color: #819FF7;
  width: 0%;
  height: 5px;
  border-radius: 3px;
  /* 让进度条水平居中，可选限制最大宽度 */
  margin: 15px auto 0;
  max-width: 80%;
}

.percent {
  /* 移除绝对定位，改为跟随流布局 */
  position: relative;
  display: inline-block;
  margin-top: 8px;
}

/* 可选：调整加载文本的上下间距 */
#loading-message {
  margin: 0 0 20px;
}

修改说明 #

• .progress通过Flex布局的justify-content: center和align-items: center，自动让内部元素垂直水平居中，无需手动计算偏移量。
• 调整.bar的margin使其水平居中，添加max-width优化宽屏显示效果。
• 重置.percent的定位方式，让它自然跟随进度条下方排列，避免绝对定位导致的位置偏差。

修改后，进度条和加载文本会居中显示在屏幕中间，且不会影响页面其他元素的布局。

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