Comment puis-je centrer une div à l'intérieur d'une autre div ?

Question

Je suppose que le #container sera centré dans #main_content. Cependant, ce n'est pas le cas. Pourquoi cela ne fonctionne-t-il pas et comment puis-je le corriger?

#main_content {
  top: 160px;
  left: 160px;
  width: 800px;
  min-height: 500px;
  height: auto;
  background-color: #2185C5;
  position: relative;
}

#container {
  width: auto;
  height: auto;
  margin: 0 auto;
  padding: 10px;
  position: relative;
}

Answer 1

Vous devez définir la largeur du conteneur (auto ne fonctionnera pas) :

#container {
    width: 640px; /* Peut aussi être en pourcentage. */
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

La référence CSS par MDN l'explique parfaitement.

Consultez ces liens :

• auto - Référence CSS | MDN
• margin - Référence CSS | MDN
• Quelle est la signification de la valeur auto dans une propriété CSS - Stack Overflow

En action sur jsFiddle.

Answer 2

Techniquement, votre DIV interne (#container) est centré horizontalement. La raison pour laquelle vous ne pouvez pas le dire est que avec la propriété CSS width: auto, le DIV interne s'étend à la même largeur que son parent.

Voir cet exemple: http://jsfiddle.net/UZ4AE/

#container {
    width: 50px;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    background-color: red;
}

Dans cet exemple, j'ai simplement défini la largeur de #container à 50px et défini l'arrière-plan en red pour que vous puissiez voir qu'il est centré.

Je pense que la vraie question est "Comment centrer des éléments horizontalement avec CSS ?" et la réponse est (roulement de tambour s'il vous plaît) : cela dépend !

Je ne ferai pas un rappel complet des nombreuses façons de centrer des choses avec CSS lorsque W3Schools le fait si bien ici : http://www.w3schools.com/css/css_align.asp mais l'idée de base est que pour les éléments de niveau bloc, vous spécifiez simplement la largeur souhaitée et définissez les marges gauche et droite à auto.

.centre {
    margin-left: auto;
    margin-right: auto;
    width: 50px;
}

Veuillez noter : Cette réponse ne s'applique qu'aux éléments de niveau bloc ! Pour positionner un élément inline, vous devrez utiliser la propriété text-align: center sur le premier parent bloc.

Answer 3

Vous pouvez centrer le float div avec ce petit code:

#div {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;

    margin-top: -100px;
    margin-left: -100px;
}

Answer 4

Maintenant, il suffit de définir votre

#main_content text-align:center et définir votre #container display:inline-block;

comme ceci :

#main_content {
    text-align: center;
}

#container{
    display: inline-block;
    vertical-align: top;
}

Answer 5

Essayez d'obtenir la position:relative; dans votre #container. Ajoutez une largeur exacte à #container:

#main_content {
    top: 160px;
    left: 160px;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width: 600px;
    height: auto;
    margin: auto;
    padding: 10px;
}

Démo fonctionnelle