带显示屏的 div:flex 不是居中子 div

Question

我有一个带display: flex的div，我想在行中心显示输出。由于某种原因，它向左显示。我希望imgBoxBot在imgBotdiv内居中。但是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.您可以在此处找到更多信息

#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>