带显示的div：flex不是以子div为中心

Question

我有一个display: flex的div，我想在行中心显示输出。出于某种原因，它显示左侧。我希望imgBoxBot在imgBot div内居中。但text-align: center仅将文字置于imgBoxBot内，我如何将实际div居中？

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>