Wie man horizontal divs innerhalb eines anderen div zentriert

Question

Ich versuche, div in einem outter div zu zentrieren, aber ich kann nicht.

Mein html ist so etwas wie dieses:

<div class="outterDiv"> 
    <div class="innerDivBig"> 
    <div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;"> 
     Inner Div 
    </div> 
    <div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;"> 
     Inner Div 
    </div> 
    <div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;"> 
     Inner Div 
    </div> 
    <div style="clear:both"/> 
    </div> 
</div> 

Und mein CSS ist so etwas wie dieses:

.outterDiv{ 
width: 600px; 
border: 1px solid #f00; 
text-align: center; 
} 

.innerDivBig{ 
    margin: 0 auto; 
    display:table; 
} 

Hier ist jsfiddle.

Answer 1

.outterDiv{ 
width: 600px; 
border: 1px solid #f00; 
text-align:center; 
} 

.innerDivBig{ 

    display: inline-block; 
} 

https://jsfiddle.net/2a8514nf/7/

Answer 2

UPDATE: https://jsfiddle.net/2a8514nf/4/

Ich benutze display: table, da der Browser die Breite der Elemente Breite display: table-cell Kind alle passen berechnet, so dass Sie gewohnt haben, um über die Breite zu kümmern.
Ich verwende auch padding anstelle von margin, da es das Element nicht erweitert, so dass die übergeordnete Größe gleich bleibt.

.outer { 
 
    width: 500px; 
 
    border: 1px solid #000; 
 
    padding: 15px; 
 
    margin: 0 auto; 
 
} 
 

 
.inner { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 

 
.inner > div { 
 
    display: table-cell; 
 
    padding: 0 5px; 
 
    text-align: center; 
 
} 
 

 
.inner > div > div { 
 
    padding: 15px; 
 
    text-align: center; 
 
    border: 1px solid #00F; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
     <div> 
 
      <div>Inner Div 1</div> 
 
     </div> 
 
     <div> 
 
      <div>Inner Div 2</div> 
 
     </div> 
 
     <div> 
 
      <div>Inner Div 3</div> 
 
     </div> 
 
    </div> 
 
</div>