CSS - marginauto; - Hur det fungerar

Använder sig av marginal: auto att centrera ett blockelement horisontellt är en välkänd teknik. Men har du någonsin undrat varför eller hur det fungerar? För att kunna svara på detta måste vi först titta på hur marginal: auto fungerar. Också i mixen är vad bil kan möjligen göra i marginaler, om det fungerar för vertikal centrering och några andra problem.

Men först, vad gör bil faktiskt gör?

Definitionen av bil varierar med element, elementstyper och sammanhang. I marginaler, bil kan innebära en av två saker: ta upp ledigt utrymme eller 0 px. Dessa två vilja Definiera olika layouter för ett element.

"auto" tar upp tillgängligt utrymme

Detta är den vanligaste användningen av marginalen bil vi stöter ofta på. Genom att tilldela bil till vänster och höger marginal av ett element, tar de upp det tillgängliga horisontella utrymmet i elementets behållare lika - och sålunda blir elementet centrerat.

Detta kommer dock endast att fungera för horisontella marginaler (mer på Varför senare), och det också kommer inte att fungera med flytande och inline-element och i sig själv också kan inte fungera i absolut och fasta positionerade element (vi kommer dock se hur man gör dem).

Faux Float genom att ta upp tillgängligt utrymme

Eftersom bil i både höger och vänster marginal tar upp "tillgängligt" utrymme lika, vad tror du kommer att hända när värdet bil ges endast en av dessa?

En vänster eller höger marginal med bil kommer att ta upp allt "ledigt" utrymme som gör att elementet ser ut som det har blivit spolat åt höger eller vänster.

“bil” Beräknad till 0px

Som tidigare nämnts, bil kommer inte att fungera i flytande, inline och absoluta element. Alla dessa element har redan bestämde sig för sina layouter, så det går inte att använda bil för marginalerna och förväntar sig att det ska bli centrerat precis som det.

Det kommer att besegra det ursprungliga syftet att använda något liknande flyta. Därav bil kommer att ha ett värde av 0px i dessa element.

bil kommer inte heller att fungera på ett typiskt blockelement om det inte har en bredd. Alla exemplen jag visade dig hittills har bredder.

En bredd av värde bil kommer att ha 0px marginaler. Ett blockelementets bredd täcker typiskt sin behållare när den är bil eller 100% och därmed en marginal bil kommer att beräknas till 0px i ett sådant fall.

Vad händer med vertikala marginaler med värdet bil?

bil i både övre och nedre marginalen beräknas alltid till 0px (med undantag för absoluta element). W3C spec säger det så här:

“Om “margin-top” eller “margin-bottom” är “bil”, deras använda värde är 0 "

Varför, ja det är så långt, ett mysterium. Det kan vara på grund av det typiska vertikala sidflödet, var sidstorleken ökar höjdvis. Så, att centrera ett element vertikalt i sin behållare kommer inte att göra det verkar centrerat, i förhållande till själva sidan, till skillnad från när det är gjort horisontellt (i de flesta fall).

Och det är kanske på grund av samma skäl, beslutade de att lägga till ett undantag för absoluta element som kan centreras vertikalt längs hela sidans höjd.

Det kan också vara på grund av marginalkollapseffekten (en kollaps av intilliggande element” marginaler) vilket är ett annat undantag för vertikala marginaler.

Den senare verkar emellertid vara ett osannolikt fall - eftersom element som inte kollapsar sina marginaler - som Floats, och element med svämma över Förutom synlig, Tilldela fortfarande 0px vertikala marginaler för bil.

Centrering av absolut positionerade element

Eftersom det råkar vara ett undantag för absolut positionerade element, vi”ska använda bil värde för att centrera en vertikalt och horisontellt. Men innan det måste vi ta reda på när det ska bli marginal: auto faktiskt jobba som vi vill ha det i ett helt placerat element.

Det här är en annan W3C-specifikation:

"Om alla tre av “vänster”, “bredd”, och “höger” är “bil”: Först ange något “bil” värden för “margin-vänster” och “margin-höger” till 0 ... "

"Om ingen av de tre är “bil”: Om båda “margin-vänster” och “margin-höger” är “bil”, lösa ekvationen under den extra begränsningen att de två marginalerna får lika värden "

Det säger ganska mycket det horisontell bil marginaler att fånga lika utrymme, värden för vänster, bredd och höger borde inte vara bil , deras standardvärde. Så allt vi behöver göra är att ge dem något värde i ett helt placerat element. vänster och höger borde ha lika stora värden för perfekt centrering.

Specifikationen nämner också något liknande för vertikala marginaler.

“Om alla tre av “topp”, “höjd”, och “botten” är auto, set “topp” till det statiska läget ... ”

“Om ingen av de tre är “bil”: Om båda “margin-top” och “margin-bottom” är “bil”, lösa ekvationen under den extra begränsningen att de två marginalerna får lika värden ... ”

Därför, för ett absolut element att vara centrerad vertikalt, dess topp, höjd, och botten värden bör inte vara bil.

Nu genom att kombinera alla dessa, så är det vad vi”får du:

Slutsats

Om du någonsin vill skölja ett element på din sida till höger eller vänster utan att följande delar omsluter det (som vad händer med flottören), kom ihåg att det finns möjlighet att använda bil för marginaler.

Konvertera ett element till absolut bara så att det kan centreras vertikalt kan inte vara en bra idé. Det finns andra alternativ som flexbox och CSS-transform som är mer lämpade för dem.