CSS - marginauto; - Come funziona

utilizzando margin: auto centrare un elemento di blocco orizzontalmente è una tecnica ben nota. Ma ti sei mai chiesto perché o come funziona? Per rispondere a questo, dobbiamo prima dare un'occhiata a come margine: funziona automaticamente. Anche nel mix è cosa auto si può fare nei margini, se funziona per il centraggio verticale, e qualche altro problema.

Ma prima, cosa fa auto davvero?

La definizione di auto varia con elementi, tipi di elemento e contesto. Ai margini, auto può significare una delle due cose: occupare lo spazio disponibile o 0 px. Queste due volontà definire diversi layout per un elemento.

"auto" occupando lo spazio disponibile

Questo è l'uso più comune del margine auto ci imbattiamo spesso. Assegnando auto ai margini sinistro e destro di un elemento, occupano allo stesso modo lo spazio orizzontale disponibile nel contenitore dell'elemento - e quindi l'elemento viene centrato.

Tuttavia, questo funzionerà solo per i margini orizzontali (maggiori informazioni su perché più tardi), e anche non funzionerà con floated e elementi in linea e da solo, anche questo non può funzionare nel assoluto e elementi posizionati fissi (vedremo comunque come fare in modo che funzionino).

Faux Float prendendo spazio disponibile

Da auto in entrambi i margini destro e sinistro occupano lo spazio "disponibile" allo stesso modo, cosa pensi che succederà quando il valore auto è dato solo a uno di quelli?

Un margine sinistro o destro con auto occuperà tutto lo spazio "disponibile" facendo apparire l'elemento come se fosse stato lavato a destra oa sinistra.

“auto” Calcolato a 0 px

Come menzionato prima, auto non funzionerà in elementi flottati, in linea e assoluti. Tutti questi elementi hanno già deciso sul loro layout, quindi non serve usarlo auto per i margini e aspettandomi di centrarsi proprio così.

Quello sconfiggerà lo scopo iniziale di usare qualcosa come galleggiante. Quindi auto avrà un valore di 0px in quegli elementi.

auto non funzionerà anche su un elemento di blocco tipico se non ha una larghezza. Tutti gli esempi che ti ho mostrato finora hanno larghezze.

Una larghezza di valore auto avrà 0px margini. La larghezza di un elemento di blocco in genere copre il suo contenitore quando lo è auto o 100% e quindi un margine auto sarà calcolato a 0px in tal caso.

Cosa succede ai margini verticali con il valore auto?

auto in entrambi i margini superiore e inferiore viene sempre calcolato su 0px (tranne che per gli elementi assoluti). Le specifiche W3C lo dicono così:

“Se “margin-top” o “margin-bottom” è “auto”, il loro valore usato è 0 "

Il perché, beh, è ​​così lontano, un mistero. Potrebbe essere a causa del tipico flusso di pagine verticali, dove la dimensione della pagina aumenta in altezza. Quindi, centrare un elemento verticalmente nel suo contenitore non lo farà apparire centrato rispetto alla pagina stessa, a differenza di quando è fatto orizzontalmente (nella maggior parte dei casi).

E forse a causa di questo stesso motivo, hanno deciso di aggiungere un'eccezione per gli elementi assoluti che possono essere centrati verticalmente lungo l'intera altezza della pagina.

Potrebbe anche essere a causa dell'effetto collasso margine (un collasso di elementi adiacenti” margini) che costituisce un'altra eccezione per i margini verticali.

Tuttavia, quest'ultimo sembra essere un caso improbabile - dal momento che elementi che non collassano i loro margini - come Floats e elementi con straripamento diverso da visibile, ancora assegnare 0px margini verticali per auto.

Centraggio di elementi assolutamente posizionati

Dal momento che sembra esserci un'eccezione per elementi posizionati in modo assoluto, noi”Io uso auto valore per centrare uno verticalmente e orizzontalmente. Ma prima, dobbiamo scoprire quando lo faranno margin: auto funziona davvero come lo vogliamo in un elemento assolutamente posizionato.

Qui è dove arriva un'altra specifica W3C:

"Se tutti e tre di “sinistra”, “larghezza”, e “destra” siamo “auto”: Prima di tutto “auto” valori per “margin-left” e “margin-right” a 0 ... "

"Se nessuno dei tre è “auto”: Se entrambi “margin-left” e “margin-right” siamo “auto”, risolvere l'equazione sotto il vincolo extra che i due margini ottengono valori uguali "

Questo praticamente lo dice per orizzontale auto margini per prendere gli spazi uguali, il valori per sinistra, larghezza e destra non dovrebbe essere auto , il loro valore predefinito. Quindi tutto ciò che dobbiamo fare è dare loro un valore in un elemento assolutamente posizionato. sinistra e destra avrebbe dovuto valori uguali per un centraggio perfetto.

La specifica menziona anche qualcosa di simile per i margini verticali.

“Se tutti e tre di “superiore”, “altezza”, e “parte inferiore” sono auto, impostare “superiore” alla posizione statica ... ”

“Se nessuno dei tre lo è “auto”: Se entrambi “margin-top” e “margin-bottom” siamo “auto”, risolve l'equazione sotto il vincolo extra che i due margini ottengono valori uguali ... ”

Quindi, per essere un elemento assoluto centrato verticalmente, suo superiore, altezza, e parte inferiore i valori non dovrebbero essere auto.

Ora combinando tutti questi, questo è ciò che noi”Otterremo:

Conclusione

Se vuoi scaricare un elemento della tua pagina a destra o a sinistra senza i seguenti elementi che lo avvolgono (come quello che succede con float), ricorda che c'è l'opzione da usare auto per i margini.

Convertire un elemento in assoluto solo per poterlo centrare verticalmente potrebbe non essere una grande idea. Ci sono altre opzioni come flexbox e CSS transform che sono più adatte a quelle.