Co dokładnie jest potrzebne do „margin: 0 auto;” pracować?

Wiem, że ustawienie margin: 0 auto;elementu służy do jego wyśrodkowania (lewy-prawy). Wiem jednak, że element i jego rodzic muszą spełniać określone kryteria, aby automatyczny margines działał, i nigdy nie wydaje mi się, aby magia była właściwa.

Moje pytanie jest więc proste: jakie właściwości CSS należy ustawić na elemencie i jego elemencie macierzystym, margin: 0 auto;aby wyśrodkować dziecko w lewo-prawo?

Z czubka mojej głowy:

1. Element musi być na poziomie bloku, np. display: blockLubdisplay: table
2. Element nie może się unosić
3. Element nie może mieć stałej ani absolutnej pozycji ¹

Z głów innych ludzi:

4. Element musi mieć wartość inną widthniż auto²

Zauważ, że wszystkie te warunki muszą być spełnione, aby element był wyśrodkowany, aby działał.

¹ _{Jest jeden wyjątek: jeśli twój nieruchomy lub absolutnie pozycjonowany element ma left: 0; right: 0, to będzie centrum z marginesami samochodowych .}

² _{Technicznie margin: 0 autodziała z automatyczną szerokością, ale automatyczna szerokość ma pierwszeństwo przed automatycznymi marginesami, w wyniku czego automatyczne marginesy są zerowane, co sprawia, że ​​wydaje się, że „nie działa”.}

Z czubka mojej głowy potrzebuje width. Musisz określić szerokość centrowanego kontenera (nie szerokość nadrzędną).

Pełna reguła dla CSS:

1. ( display: blockI widthnie auto) LUBdisplay: table
2. float: none
3. position: relative

Z czubka mojej głowy, jeśli element nie jest elementem blokowym - zrób to.

a następnie nadaj jej szerokość.

Będzie także działał z display: table - użyteczną właściwością display w tym przypadku, ponieważ nie wymaga ustawienia szerokości. (Wiem, że ten post ma 5 lat, ale nadal jest odpowiedni dla przechodniów;)

Z czubka głowy mojego kota upewnij się, że ustawienie div, którego próbujesz wyśrodkować, nie jest ustawionewidth: 100% .

Jeśli tak, to ważne będą reguły określone dla div div dziecka.

Przejdź do tego szybkiego przykładu, który stworzyłem jsFiddle . Hopefull jest łatwy do zrozumienia. Możesz użyć wrapperdiv z szerokością strony, aby wyśrodkować. Powodem widthjest to, że przeglądarka wie, że nie wybierasz płynnego układu.

Oto moja sugestia:

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;

Być może interesujące jest to, że nie trzeba określać szerokości <button>elementu, aby działał - po prostu upewnij się, że ma on display:block: http://jsfiddle.net/muhuyttr/

Dla każdego, kto właśnie trafia w to pytanie i nie jest w stanie go naprawić margin: 0 auto, oto coś, co odkryłem, że może ci się przydać: tableelement bez określonej szerokości musi mieć, display: tablea nie display: block w celu margin: autowykonania pracy. Dla niektórych może to być oczywiste, ponieważ połączenie display: blocki widthwartość domyślna da tabelę, która rozszerzy się, aby wypełnić swój pojemnik, ale jeśli chcesz, aby tabela miała „naturalną” szerokość i była wyśrodkowana, potrzebujeszdisplay: table