CSS - marginauto; - Hoe het werkt

Gebruik makend van margin: auto om een ​​blokelement horizontaal te centreren is een algemeen bekende techniek. Maar heb je je ooit afgevraagd waarom of hoe het werkt? Om dit te beantwoorden, moeten we eerst kijken hoe marge: auto werkt. Ook in de mix is ​​wat auto kan mogelijk in marges werken, als het werkt voor verticale centrering, en een paar andere problemen.

Maar eerst, wat doet auto eigenlijk doen?

De definitie van auto verschilt met elementen, element types en context. In marges, auto kan een van twee dingen betekenen: neem de beschikbare ruimte in beslag of 0 px. Deze twee zullen definieer verschillende lay-outs voor een element.

"auto" Beschikbare ruimte innemen

Dit is het meest voorkomende gebruik van marge auto we komen vaak tegen. Door toe te wijzen auto links en rechts van een element nemen ze de beschikbare horizontale ruimte in de container van het element gelijk op - en dus wordt het element gecentreerd.

Dit werkt echter alleen voor horizontale marges (meer op de waarom later), en ook zal niet werken met floated en inline elementen en op zichzelf ook kan niet werken in absoluut en vast gepositioneerde elementen (we zullen echter wel zien hoe we die kunnen laten werken).

Faux Float door beschikbare ruimte in te nemen

Sinds auto in zowel de linker- als de rechtermarges neemt u de "beschikbare" ruimte gelijk op, wat denkt u dat er zal gebeuren als de waarde auto wordt slechts aan een van hen gegeven?

Een linker of rechter marge met auto neemt alle "beschikbare" ruimte in beslag waardoor het element eruit ziet alsof het rechts of links is gespoeld.

“auto” Berekend naar 0px

Zoals eerder vermeld, auto werkt niet in zwevende, inline en absolute elementen. Al deze elementen hebben al besloten over hun lay-outs, dus het heeft geen zin om te gebruiken auto voor de marges en verwachten dat het zo gecentreerd wordt.

Dat zal het oorspronkelijke doel van het gebruik van zoiets verslaan vlotter. Vandaar auto zal in die elementen een waarde van 0px hebben.

auto zal ook niet werken op een typisch blokelement als het geen breedte heeft. Alle voorbeelden die ik tot nu toe heb laten zien hebben breedtegraden.

Een waardewaarde auto zal hebben 0px marges. De breedte van een blokelement dekt doorgaans de container af wanneer deze is auto of 100% en dus een marge auto zal worden berekend 0px in zo'n geval.

Wat gebeurt er met verticale marges met de waarde auto?

auto in zowel de boven- als ondermarges wordt altijd berekend tot 0px (behalve voor absolute elementen). W3C spec zegt het zo:

“Als “margin-top” of “margin-bottom” is “auto”, hun gebruikte waarde is 0 "

Het waarom, nou dat is tot nu toe, een mysterie. Het kan zijn vanwege de typische verticale paginastroom, waar de paginagrootte neemt qua hoogte toe. Dus, door een element verticaal in de container te centreren, zal het niet gecentreerd lijken ten opzichte van de pagina zelf, in tegenstelling tot wanneer het horizontaal wordt gedaan (in de meeste gevallen).

En misschien is het om dezelfde reden dat ze besloten om een ​​uitzondering toe te voegen voor absolute elementen die verticaal langs de hele pagina kunnen worden gecentreerd.

Het kan ook het gevolg zijn van het margestorteffect (een instorting van aangrenzende elementen” marges), wat een andere uitzondering is voor de verticale marges.

Dit laatste lijkt echter een onwaarschijnlijk geval - aangezien elementen die hun marges niet doen instorten - zoals Floats en elementen met overloop anders dan zichtbaar, nog steeds 0px verticale marges toewijzen voor auto.

Centreert absoluut geplaatste elementen

Aangezien er toevallig een uitzondering is voor absoluut gepositioneerde elementen, wij”Ik gebruik auto waarde om een ​​verticaal en horizontaal te centreren. Maar daarvoor moeten we uitzoeken wanneer zal margin: auto eigenlijk werken zoals we het willen in een absoluut gepositioneerd element.

Dit is waar een andere W3C-specificatie in komt:

"Als alle drie van “links”, “breedte”, en “rechts” zijn “auto”: Stel eerst een in “auto” waarden voor “-Marge” en “margin-right” tot 0 ... "

"Als geen van de drie is “auto”: Als beide “-Marge” en “margin-right” zijn “auto”, los de vergelijking op onder de extra beperking dat de twee marges gelijke waarden krijgen "

Dat zegt zo ongeveer horizontaal auto marges om gelijke ruimtes te veroveren, de waarden voor links, breedte en rechts zou niet moeten zijn auto , hun standaardwaarde. Dus alles wat we moeten doen is ze waarde te geven in een absoluut gepositioneerd element. links en rechts zou moeten hebben gelijke waarden voor een perfecte centrering.

De specificatie vermeldt ook iets soortgelijks voor verticale marges.

“Als alle drie van “top”, “hoogte”, en “bodem” zijn auto, ingesteld “top” naar de statische positie ... ”

“Als geen van de drie zijn “auto”: Als beide “margin-top” en “margin-bottom” zijn “auto”, los de vergelijking op onder de extra beperking dat de twee marges gelijke waarden krijgen ... ”

Vandaar dat er een absoluut element moet zijn gecentreerd verticaal, haar top, hoogte, en bodem waarden zouden dat niet moeten zijn auto.

Nu door al deze te combineren, is dit wat wij”Ik krijg:

Conclusie

Als je ooit een element op je pagina naar rechts of links wilt spoelen zonder de volgende elementen erin te verpakken (zoals wat er gebeurt met float), onthoud dan dat er een optie is om te gebruiken auto voor marges.

Het omzetten van een element in absoluut, zodat het verticaal gecentreerd kan zijn, is misschien geen goed idee. Er zijn andere opties zoals flexbox en CSS-transformatie die daar meer geschikt voor zijn.