Ce qui est exactement nécessaire pour "margin: 0 auto;" travailler?

Je sais que le réglage margin: 0 auto;d'un élément est utilisé pour le centrer (gauche-droite). Cependant, je sais que l'élément et son parent doivent répondre à certains critères pour que la marge automatique fonctionne, et je n'arrive jamais à faire le bon choix.

Ma question est donc simple: quelles propriétés CSS doivent être définies sur un élément et son parent pour margin: 0 auto;centrer l'enfant de gauche à droite?

Du haut de ma tête:

1. L'élément doit être de niveau bloc, par exemple display: blockoudisplay: table
2. L'élément ne doit pas flotter
3. L'élément ne doit pas avoir de position fixe ou absolue ¹

Du haut de la tête des autres:

4. L'élément doit avoir un widthqui n'est pas auto²

Notez que toutes ces conditions doivent être vraies pour que l'élément soit centré pour qu'il fonctionne.

¹ _{Il y a une exception à cela: si votre élément fixe ou absolument positionné a left: 0; right: 0, il sera centré avec des marges automatiques .}

² _{Techniquement, margin: 0 autofonctionne avec une largeur automatique, mais la largeur automatique a priorité sur les marges automatiques, et les marges automatiques sont mises à zéro en conséquence, donnant l'impression qu'elles "ne fonctionnent pas".}

Du haut de ma tête, il a besoin d'un width. Vous devez spécifier la largeur du conteneur que vous centrez (pas la largeur parent).

Règle complète pour CSS:

1. ( display: blockET widthpas automatique) OUdisplay: table
2. float: none
3. position: relative

Du haut de ma tête, si l'élément n'est pas un élément de bloc - faites-le.

puis donnez-lui une largeur.

Cela fonctionnera également avec display: table - une propriété d'affichage utile dans ce cas car elle ne nécessite pas de largeur. (Je sais que ce message a 5 ans, mais il est toujours pertinent pour les passants;)

Du haut de la tête de mon chat, assurez- divvous que celui que vous essayez de centrer n'est pas réglé sur width: 100%.

Si c'est le cas, alors les règles établies sur les divs enfants seront ce qui importera.

Veuillez consulter cet exemple rapide que j'ai créé jsFiddle . Espérons que c'est facile à comprendre. Vous pouvez utiliser un wrapperdiv avec la largeur du site pour centrer l'alignement. La raison que vous devez mettre widthest que le navigateur sait que vous n'allez pas pour une mise en page liquide.

Voici ma suggestion:

First: 
      1. Add display: block or table
      2. Add position: relative
      3. Add width:(percentage also works fine)
Second: 
      if above trick not works then you have to add float:none;

Il est peut-être intéressant que vous n'ayez pas à spécifier la largeur d'un <button>élément pour le faire fonctionner - assurez-vous simplement qu'il a display:block: http://jsfiddle.net/muhuyttr/

Pour quiconque vient de frapper cette question et ne peut pas résoudre margin: 0 auto, voici quelque chose que j'ai découvert que vous pourriez trouver utile: un tableélément sans largeur spécifiée doit avoir display: tableet pas display: block pour margin: autofaire du travail. Cela peut être évident pour certains, car la combinaison de display: blocket la widthvaleur par défaut donnera une table qui se développe pour remplir son conteneur, mais si vous voulez que la table prenne sa largeur "naturelle" et soit centrée, vous avez besoindisplay: table