Cosa è esattamente necessario per "margin: 0 auto;" lavorare?

So che l'impostazione margin: 0 auto;su un elemento viene utilizzata per centrarlo (sinistra-destra). Tuttavia, so che l'elemento e il suo genitore devono soddisfare determinati criteri per far funzionare il margine automatico e non riesco mai a trovare la magia giusta.

Quindi la mia domanda è semplice: quali proprietà CSS devono essere impostate su un elemento e sul suo genitore al fine margin: 0 auto;di centrare il bambino a destra-sinistra?

In cima alla mia testa:

1. L'elemento deve essere a livello di blocco, ad es. display: blockOppuredisplay: table
2. L'elemento non deve galleggiare
3. L'elemento non deve avere una posizione fissa o assoluta ¹

Fuori dalla testa delle altre persone:

4. L'elemento deve avere un valore widthnon auto²

Si noti che tutte queste condizioni devono essere vere per l'elemento centrato affinché funzioni.

¹ _{C'è una sola eccezione a questa: se il vostro fisso o elemento posizionato in modo assoluto ha left: 0; right: 0, esso sarà centrare con margini auto .}

² _{Tecnicamente, margin: 0 autofunziona con una larghezza automatica, ma la larghezza automatica ha la precedenza sui margini automatici e, di conseguenza, i margini automatici vengono azzerati, facendo sembrare che non "funzionino".}

Dalla parte superiore della mia testa, ha bisogno di un width. Devi specificare la larghezza del contenitore che stai centrando (non la larghezza principale).

Regola completa per CSS:

1. ( display: blockE widthnon auto) ORdisplay: table
2. float: none
3. position: relative

Dalla parte superiore della mia testa, se l'elemento non è un elemento a blocchi, fallo così.

e poi dagli una larghezza.

Funzionerà anche con display: table - un'utile proprietà display in questo caso perché non richiede l'impostazione di una larghezza. (So ​​che questo post ha 5 anni, ma è ancora rilevante per i passanti;)

Dalla parte superiore della testa del mio gatto, assicurati che divnon stia cercando di centrare width: 100%.

Se lo è, allora le regole stabilite sui div bambini sono ciò che conta.

Per favore, vai a questo breve esempio che ho creato jsFiddle . Spero sia facile da capire. È possibile utilizzare un wrapperdiv con la larghezza del sito per allineare al centro. Il motivo che devi mettere widthè che così il browser sa che non stai andando per un layout liquido.

Ecco il mio suggerimento:

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;

È forse interessante che non sia necessario specificare la larghezza per un <button>elemento per farlo funzionare - assicurati solo che abbia display:block: http://jsfiddle.net/muhuyttr/

Per chiunque proprio ora colpire questa domanda e non essere in grado di risolvere margin: 0 auto, ecco qualcosa che ho scoperto che potresti trovare utile: un tableelemento senza una larghezza specificata deve avere display: tablee non display: block per margin: autofunzionare. Questo può essere ovvio per alcuni, poiché la combinazione di display: blocke il widthvalore predefinito darà una tabella che si espande per riempire il suo contenitore, ma se vuoi che la tabella prenda la sua larghezza "naturale" e sia centrata, devidisplay: table