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

I am trying to center 2 child div to parent div, but they are appearing side by side at center.

html

<div >
  <i ></i>
  <div >Content is being loaded</div>
</div>

css

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

As we can loader and text are side by side, but I loader at center and very next line text, which also should be at center of parent.

e.g: loader should be just above the text is being

I am using bootstrap V5.0.

CodePudding user response：

Use flex-column

<div >
      <i ></i>
      <div >Content is being loaded</div>
    </div>