div with display: flex is not centering child div

Question

I have a div with a display: flex, and I would like to display the output in a row center. For some reason it is displaying left. I want the imgBoxBot to be centered inside the imgBot div. But text-align: center is only centering the text inside the imgBoxBot, how do I center the actual div?

#imgBot {
  position: absolute;
  height: 100px;
  width: 100%;
  bottom: 0;
  display: flex;
  flex-direction: row;
  text-align: center;
}

#imgBoxBot {
  height: 100px;
  width: 100px;
}

<div id="imgBot">
  <div id="imgBoxBot">
    test
  </div>
  <div id="imgBoxBot">
    test
  </div>
</div>

Answer 1

Use justify-content: center. You can find more information here

#imgBot {
  position: absolute;
  height: 100px;
  width: 100%;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.imgBoxBot {
  height: 100px;
  width: 100px;
}

<div id="imgBot">
  <div class="imgBoxBot">
    test
  </div>
  <div class="imgBoxBot">
    test
  </div>
</div>