如何将文本层叠居中显示在loader容器上方？

要让文本居中叠加在loader上方，核心是将两个元素放入同一个父容器，通过定位或布局方式让文本精准居中覆盖在loader上。以下是两种简单可行的实现方式：

方法一：相对+绝对定位（兼容性好） #

修改后的HTML #

<div class="loader-container">
  <div id="loader"></div>
  <div id="Text">
    <b>Loading</b>
  </div>
</div>

修改后的CSS #

/* 父容器设为相对定位，作为子元素绝对定位的参考基准 */
.loader-container {
  position: relative;
  width: 100px; /* 与loader宽度保持一致 */
  margin: auto; /* 让整个加载组件在页面中水平居中 */
}

#loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #003750;
  width: 100px;
  height: 100px;
  animation: spin 2s linear infinite;
}

#Text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 让文本自身基于中心对齐 */
  font-weight: bold;
  margin: 0; /* 清除默认边距，避免偏移 */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

方法二：Flex布局（简洁直观） #

修改后的HTML #

<div class="loader-container">
  <div id="loader"></div>
  <div id="Text">
    <b>Loading</b>
  </div>
</div>

修改后的CSS #

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin: auto;
  position: relative;
}

#loader {
  position: absolute;
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #003750;
  width: 100%;
  height: 100%;
  animation: spin 2s linear infinite;
}

#Text {
  z-index: 1; /* 确保文本显示在loader上层 */
  font-weight: bold;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

关键要点 #

• 父容器用于约束加载组件的范围，同时提供定位参考
• transform: translate(-50%, -50%) 能让元素不受自身尺寸影响，精准居中
• z-index 可确保文本始终在loader上方（部分场景下可省略，后渲染的元素默认层级更高）

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