div mit display: flex ist nicht zentriert kind div

Question

Ich habe eine div mit einer display: flex, und ich möchte die Ausgabe in einer Zeile Mitte anzeigen. Aus irgendeinem Grund wird links angezeigt. Ich möchte die imgBoxBot in der imgBotdiv zentriert werden. Aber text-align: center zentriert nur den Text innerhalb der imgBoxBot, wie zentriere ich die tatsächliche 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

Verwendung justify-content: center. Sie können mehr Informationen finden 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>