居中对齐 2 child div 到 parent div with flex box bootstrap 5

Question

我试图将 2 child div 居中到 parent div，但它们并排出现在中心。

html

<div class="container mt-5 box d-flex justify-content-center align-items-center">
  <i class="fa-solid fa-circle-notch text-danger"></i>
  <div class="">Content is being loaded</div>
</div>

css

.box {
    width: 500px;
    height: 300px;
    margin: auto;
    background: lightgreen;
}

我们可以加载器和文本并排放置，但我加载器位于中间，下一行文本也应该位于 parent 的中心。

例如：loader 应该在正文上方 is being

我正在使用 bootstrap V5.0.

JsFiddle

Answer 1

使用flex-column

<div class="container mt-5 box d-flex flex-column justify-content-center align-items-center">
      <i class="fa-solid fa-circle-notch text-danger"></i>
      <div class="">Content is being loaded</div>
    </div>

https://jsfiddle.net/tg02owcd/

居中对齐 2 child div 到 parent div with flex box bootstrap 5

Center align 2 child div to parent div with flex box bootstrap 5

html

css

bootstrap-5