Bootstrap 5中如何实现Loader在Div内垂直水平居中？

你的问题主要出在两个点：一是父容器高度传递失效，二是Loader伪元素的定位基准错误，以下是具体的修复方案：

方案一：用Bootstrap原生Flex类简化实现 #

直接利用Bootstrap的flex布局类完成居中，同时修正Loader的定位问题：

修改后的HTML：

<div class="mnh-500 mnw-500 mnh-350-sm mnw-350-sm radius-lg relative zi-3 text-box d-flex justify-content-center align-items-center" id="loaders">
  <div class="loading"></div>
</div>

修改后的CSS：

.loading {
  width: 20px;
  height: 20px;
  transform: rotate(70deg);
  position: relative; /* 关键：让伪元素以自身为定位基准 */
}

.loading::before,
.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50px;
  animation: loading 2s linear infinite;
}

.loading::before {
  box-shadow: 60px 60px #fe2712, -60px -60px #ff033e;
}

.loading::after {
  box-shadow: 60px 60px #ffa700, -60px -60px #7f00ff;
  transform: translate(-50%, -50%) rotate(90deg);
}

@keyframes loading {
  50% {
    width: 160px;
    height: 160px;
  }
}

说明：

• 给#loaders添加d-flex justify-content-center align-items-center，直接通过Bootstrap类实现子元素的水平垂直居中，省去额外的main-container。
• 给.loading加上position:relative，确保伪元素的绝对定位是相对于Loader自身，避免因继承父级定位导致的位置偏移。

方案二：保留自定义main-container的修复方式 #

如果想保留原有的main-container结构，需要确保高度能正确传递，并修正定位：

修改后的HTML：

<div class="mnh-500 mnw-500 mnh-350-sm mnw-350-sm radius-lg relative zi-3 text-box" id="loaders">
  <div class="main-container">
    <div class="loading"></div>
  </div>
</div>

修改后的CSS：

#loaders {
  height: 100%; /* 或设置具体高度，比如height:500px，确保子元素的height:100%有参考基准 */
  display: flex;
}

.main-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100% !important;
  width: 100%; /* 确保水平方向占满父容器，让align-items:center生效 */
}

.loading {
  width: 20px;
  height: 20px;
  transform: rotate(70deg);
  position: relative; /* 修正伪元素定位基准 */
}

.loading::before,
.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50px;
  animation: loading 2s linear infinite;
}

.loading::before {
  box-shadow: 60px 60px #fe2712, -60px -60px #ff033e;
}

.loading::after {
  box-shadow: 60px 60px #ffa700, -60px -60px #7f00ff;
  transform: translate(-50%, -50%) rotate(90deg);
}

@keyframes loading {
  50% {
    width: 160px;
    height: 160px;
  }
}

说明：

• 给#loaders设置height:100%（或具体高度）并添加display:flex，确保main-container能继承并占满父容器高度。
• 给main-container加上width:100%，保证水平方向铺满父容器，让align-items:center的居中效果生效。

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