Centrer le conteneur de divs

Question

J'essaie de centrer le conteneur de divs (boîtes grises) de sorte que A = B. Cette égalité doit être préservée lors du redimensionnement des fenêtres du navigateur. En outre, lorsque la fenêtre est plus petite que la largeur du nombre actuel de divs dans une rangée, l'arrangement div devrait changer à moins de nombre de colonnes. J'essayais de trouver du code, mais pas de chance. J'espère que quelqu'un pourrait aider.

Et voici le code que j'ai pour l'instant

HTML:

<div id="Area"> 
    <div id="container"> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
    </div> 
</div> 

CSS:

#Area { 
    padding: 30px 50px; /* top and bottom 25px, left and right 50px */ 
} 

#container{ 
    width: 90%; 
    margin: 0 auto; 
} 

.square { 
    display: inline-block; 
    margin: 7 auto; 
    width: 350px; 
    height: 200px; 
    background-color: gray; 
    border: 1px black solid; 
} 

UPDATE. Après l'aide de Shai, je suis venu à un nouveau problème. Divs sont maintenant empilés aimé:

Mais je voudrais les avoir comme ceci:

Answer 1

Ajouter text-align: center; au #container.

Working JSFiddle

Answer 2

Une solution rapide sans changer votre balisage et styles serait de donner à vos #area les attributs position:relative; et width:100% ainsi que de changer le width:90% à une width:100% complète de votre #container

#Area { 
    padding: 30px 50px; /* top and bottom 25px, left and right 50px */ 
    width: 100%; 
    position: relative; 
} 

#container{ 
    width: 100%; 
    margin: 0 auto; 
} 

http://jsfiddle.net/8a0035ep/

Answer 3

Une autre solution (que je préfère) est de rem ove dsiplay: inline-block (donc conservez le bloc par défaut) et utilisez margin: 0 auto. Ajoutez également margin-bottom à x px en fonction de vos besoins.

#Area { 
 
    padding: 30px 50px; 
 
    /* top and bottom 25px, left and right 50px */ 
 
} 
 
#container { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
} 
 
.square { 
 
    margin: 7 auto; 
 
    width: 350px; 
 
    height: 200px; 
 
    background-color: gray; 
 
    border: 1px black solid; 
 
    margin: 0 auto; 
 
    margin-bottom: 5px; 
 
}

<div id="Area"> 
 
    <div id="container"> 
 
     <div class="square"></div> 
 
     <div class="square"></div> 
 
     <div class="square"></div> 
 
     <div class="square"></div> 
 
     <div class="square"></div> 
 
     <div class="square"></div> 
 
     <div class="square"></div> 
 
     <div class="square"></div> 
 
     <div class="square"></div> 
 
     <div class="square"></div> 
 
     <div class="square"></div> 
 
     <div class="square"></div> 
 
    </div> 
 
</div>

Answer 4

pourrait vous entendu parler media query. J'utilise l'attribut pour atteindre votre objectif.
This is my JSFiddle.
Le code principal:

@media screen and (min-width:352px){ 
    #container{ 
     text-align: center; 
    } 
}