Comment horizontalement centre d'une div dans une div?

Question

Comment puis-je horizontalement centre div en div avec CSS (si c'est possible)?

L'extérieur div a 100%:

<div id="outer" style="width:100%">  
    <div id="inner">Foo foo</div>
</div>

Answer 1

Vous pouvez appliquer cette CSS à l'intérieur de la div:

#inner {
    width: 50%;
    margin: 0 auto;
}

Bien sûr, vous n'avez pas à mettre la largeur à 50%. Toute la largeur de moins que le div contenant fonctionne. L' margin: 0 auto est ce qui fait le réel de centrage.

Si vous ciblez IE8+, il pourrait être préférable d'avoir ceci à la place:

#inner {
    display: table;
    margin: 0 auto;
}

Il fera de l'intérieur de l'élément de centrer horizontalement et il fonctionne sans réglage de la largeur.

Answer 2

Si vous ne voulez pas définir une largeur fixe à l'intérieure de la div vous pourriez faire quelque chose comme ceci:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

Qui rend les intérieurs div dans un élément inline qui peut être centrée avec text-align.

Answer 3

Les meilleures approches avec CSS 3

modèle de boîte:

#outer{
    width:100%;

    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;

    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;

    /* W3C */
    display:box;
    box-pack:center;
    box-align:center;
}
#inner{
    width:50%;
}

En fonction de vos conditions d'utilisation, vous pouvez également utiliser l' box-orient, box-flex, box-direction propriétés.

flex :

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Ici, c'est un terrain de jeu pour le centrage des éléments avec un modèle de boîte.

• Lien 1

Lire plus sur le centrage de l'enfant-éléments

• Lien 2

• Lien 3

• Lien 4

Et c'est ce qui explique pourquoi le modèle de boîte est la meilleure approche.

• Pourquoi le W3C modèle de boîte considéré comme le meilleur?

Answer 4

Supposons que votre div est de 200px de large:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Answer 5

J'ai créé cet exemple pour montrer comment verticalement et horizontalement align.

Le Code est essentiellement ceci:

#outer {
  position: relative;
}

et...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

et il va rester dans l' center même lorsque vous re-de la taille de votre écran

Espérons que cette aide