html - 带显示的div : flex is not centering child div

Question

我有一个带有 display: flex 的 div ，我想在行中心显示输出。由于某种原因它显示在左侧。我想要imgBoxBot位于 imgBot 的中心div 。但是text-align: center仅将 imgBoxBot 内的文本居中，我如何居中实际的 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

使用justify-content: center。您可以找到更多信息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>