Wat is er precies nodig voor “marge: 0 auto;” aan het werk?

Ik weet dat het instellen van margin: 0 auto;op een element wordt gebruikt om het te centreren (links-rechts). Ik weet echter dat het element en zijn bovenliggende element aan bepaalde criteria moeten voldoen om de automatische marge te laten werken, en het lijkt erop dat ik de magie nooit goed krijg.

Dus mijn vraag is simpel: welke CSS-eigenschappen moeten worden ingesteld op een element en zijn ouder om margin: 0 auto;links-rechts het kind te laten centreren?

Antwoord 1, autoriteit 100%

Uit mijn hoofd:

1. Het element moet op blokniveau zijn, b.v. display: blockof display: table
2. Het element mag niet zweven
3. Het element mag geen vaste of absolute positie hebben¹

Uit het hoofd van andere mensen:

4. Het element moet een widthhebben die niet auto²

is

Houd er rekening mee dat alvan deze voorwaarden moet gelden voor het element dat wordt gecentreerd om te kunnen werken.

¹_{Er is één uitzondering hierop: als uw vaste of absoluut gepositioneerde element left: 0; right: 0, het zalcentreren met automatische marges.}

²_{Technisch gezien werkt margin: 0 automet een automatische breedte, maar de automatische breedte heeft voorrang op de automatische marges, en de automatische marges zijn als resultaat op nul gezet, waardoor het lijkt alsof ze “niet werken”.}

Antwoord 2, autoriteit 7%

Uit mijn hoofd, het heeft een widthnodig. U moet de breedte opgeven van de container die u centreert (niet de bovenliggende breedte).

Antwoord 3, autoriteit 4%

Volledige regel voor CSS:

1. (display: blockEN widthniet automatisch) OF display: table
2. float: none
3. position: relative

Antwoord 4

Uit mijn hoofd, als het element geen blokelement is, maak het dan zo.

en geef het een breedte.

Antwoord 5

Het werkt ook met display:table – in dit geval een nuttige weergave-eigenschap omdat er geen breedte hoeft te worden ingesteld. (Ik weet dat dit bericht 5 jaar oud is, maar het is nog steeds relevant voor voorbijgangers 😉

Antwoord 6

Ga naar dit snelle voorbeeld dat ik heb gemaakt jsFiddle. Hopelijk is het gemakkelijk te begrijpen. U kunt een wrapperdiv gebruiken met de breedte van de site om te centreren. De reden dat je widthmoet zetten, is dat de browser weet dat je niet voor een vloeiende lay-out gaat.

Antwoord 7

Hier is mijn suggestie:

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;

Antwoord 8

Het is misschien interessant dat je geen breedte hoeft te specificeren voor een <button>element om het te laten werken – zorg er gewoon voor dat het display:block: http://jsfiddle.net/muhuyttr/

Antwoord 9

Als je geen vaste breedte hebt voor je bovenliggende element, werkte het hebben van je bovenliggende element met display: flexvoor mij.

Antwoord 10

Voor iedereen die deze vraag zojuist beantwoordt en niet in staat is om margin: 0 autoop te lossen, hier is iets waarvan ik ontdekte dat je het misschien nuttig vindt: een tableelement zonder gespecificeerde breedtemoet display: tableen notdisplay: blockhebben voor margin: autoom werk te doen. Dit kan voor sommigen duidelijk zijn, omdat de combinatie van display: blocken de standaard width-waarde een tabel geeft die uitbreidt om de container te vullen, maar als u wiltde tabel zijn “natuurlijke” breedte engecentreerd hebben, dan heb je display: table

nodig