Was genau wird für "margin: 0 auto;" benötigt? arbeiten?

Ich weiß, dass die Einstellung margin: 0 auto;eines Elements verwendet wird, um es zu zentrieren (links-rechts). Ich weiß jedoch, dass das Element und sein übergeordnetes Element bestimmte Kriterien erfüllen müssen, damit der automatische Rand funktioniert, und ich kann nie scheinen, die Magie richtig zu machen.

Meine Frage ist also einfach: Welche CSS-Eigenschaften müssen für ein Element und sein übergeordnetes Element festgelegt werden, damit das untergeordnete Element margin: 0 auto;von links nach rechts zentriert werden kann?

Aus dem Kopf:

1. Das Element muss auf Blockebene sein, z. B. display: blockoderdisplay: table
2. Das Element darf nicht schweben
3. Das Element darf keine feste oder absolute Position ^{1 haben}

Aus den Köpfen anderer Leute:

4. Das Element muss eine haben width, die nicht auto^{2 ist}

Beachten Sie, dass alle diese Bedingungen für das zentrierte Element gelten müssen, damit es funktioniert.

¹ _{Es gibt eine Ausnahme: wenn Ihre festen oder absolut positionierten Element left: 0; right: 0, es wird mit Auto - Margen Zentrum .}

^{2 Funktioniert} _{technisch gesehen margin: 0 automit einer automatischen Breite, aber die automatische Breite hat Vorrang vor den automatischen Rändern, und die automatischen Ränder werden als Ergebnis auf Null gesetzt, sodass es so aussieht, als ob sie "nicht funktionieren".}

Auf den ersten Blick braucht es eine width. Sie müssen die Breite des zu zentrierenden Containers angeben (nicht die übergeordnete Breite).

Vollständige Regel für CSS:

1. ( display: blockUND widthnicht automatisch) ODERdisplay: table
2. float: none
3. position: relative

Wenn das Element kein Blockelement ist, machen Sie es so.

und geben Sie ihm dann eine Breite.

Es funktioniert auch mit display: table - eine nützliche Anzeigeeigenschaft in diesem Fall, da keine Breite festgelegt werden muss. (Ich weiß, dass dieser Beitrag 5 Jahre alt ist, aber für Passanten immer noch relevant ist;)

Stellen divSie sicher, dass das, was Sie zentrieren möchten, nicht auf den Kopf meiner Katze eingestellt ist width: 100%.

Wenn dies der Fall ist, sind die Regeln für die untergeordneten Divs von Bedeutung.

Bitte gehen Sie zu diesem kurzen Beispiel, das ich mit jsFiddle erstellt habe . Hoffentlich ist es leicht zu verstehen. Sie können ein wrapperDiv mit der Breite der Site verwenden, um die Ausrichtung zu zentrieren. Der Grund, den Sie angeben müssen, widthist, dass der Browser weiß, dass Sie sich nicht für ein flüssiges Layout entscheiden.

Hier ist mein Vorschlag:

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;

Es ist vielleicht interessant, dass Sie keine Breite für ein <button>Element angeben müssen , damit es funktioniert - stellen Sie nur sicher, dass es Folgendes hat display:block: http://jsfiddle.net/muhuyttr/

Für jeden, der gerade diese Frage beantwortet und nicht in der Lage ist, sie zu beheben margin: 0 auto, ist Folgendes , das ich entdeckt habe, möglicherweise nützlich: Ein tableElement ohne angegebene Breite muss vorhanden sein display: tableund nicht display: block , margin: autodamit es funktioniert. Dies mag für einige offensichtlich sein, da die Kombination aus display: blockund dem Standardwert widtheine Tabelle ergibt, die erweitert wird, um ihren Container zu füllen. Wenn Sie jedoch möchten, dass die Tabelle ihre "natürliche" Breite annimmt und zentriert ist, müssen Siedisplay: table