Center einen Container voller divs

Question

Ich habe alle Arten von Kombinationen von Rand versucht: 0 Auto, Display, Breite usw. und ich kann nicht meinen Container auf dem Bildschirm zu zentralisieren. Ich bin in der "Geige herum, bis es funktioniert" Bühne, aber mir sind die Ideen ausgegangen.

Ich habe einen Container (ein Div), der 6 divs enthält (könnte später erhöhen), die jeweils ein Tortendiagramm enthalten. Ich möchte, dass die Diagramme zentral ausgerichtet werden und sich je nachdem, wie sie auf den Bildschirm passen, voneinander trennen. Zum Beispiel, wenn Platz für 3 breit ist, würde ich sie 3 mal 2 mal tief haben, aber horizontal zentralisiert. Wenn es nur Platz für 1 gibt, dann 1 Breite mal 6 Tiefe, aber immer noch die eine horizontal zentriert.

Sie sortieren sich korrekt, z. B. 3 x 2 oder 2 x 3, aber sie sind gegen den linken Rand gedrückt und ich kann nicht herausfinden, wie sie zu zentralisieren.

Meine CSS am mo (was nicht funktioniert) ist:

#container { 
    margin : 0 auto; 
    display : inline-block; 
} 

#chart { 
    float : left; 
} 

Answer 1

Verwenden

display: block; 

statt

display: inline-block; 

Answer 2

#container { 
    text-align: center; 
} 

#chart { 
    display: inline-block; 
} 

Answer 3

Flex hat die meisten Fähigkeit Hier.

HTML:

<div class="container"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

CSS:

.container { 
    /* We first create a flex layout context */ 
    display: flex; 

    /* Then we define the flow direction and if we allow the items to wrap 
    * Remember this is the same as: 
    * flex-direction: row; 
    * flex-wrap: wrap; 
    */ 
    flex-flow: row wrap; 

    /* Then we define how is distributed the remaining space */ 
    justify-content: space-around; 
} 

.child { 
    display: inline-block; 
    height: 200px; 
    width: 200px; 
    margin: 5px; 
    border: 2px solid red; 
} 

Fiddle: https://jsfiddle.net/0rq78w7r/1/

CSS Tricks Flex