13 ways to vertical center

Ai bei vecchi tempi, i limiti del CSS erano tali che anche cose “semplici” come il centraggio verticale rappresentavano una sfida, con alcuni di noi che si affidavano anche a soluzioni JavaScript. Era fragile, era molto vincolato, e c’era sempre quell’eccezione che lo faceva fallire.

Se stavamo cercando di allineare un’icona o un’immagine accanto al testo, creare uno di quei popolari banner “eroe” o una sovrapposizione modale, centrare le cose sull’asse verticale era sempre una lotta.

Ma CSS ha fatto molta strada da allora, fornendo molti metodi che hanno reso il centraggio verticale più semplice ogni volta. Ecco un riassunto di alcuni di essi, insieme ai loro casi d’uso e limitazioni.

Posizionamento assoluto e margine auto

Un elemento senza dimensione intrinseca può essere “centrato” semplicemente usando valori uguali dall’alto e dal basso. Quando l’elemento ha dimensioni intrinseche, potremmo usare 0 per top e bottom, quindi applicare margin auto. Questo centrerà automaticamente l’elemento:

.container{ position:relative;}.element{ position:absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 20px; /*requires explicit height*/}

Vedere la penna
Centraggio 1: posizionamento assoluto di Facundo Corradini (@facundocorradini)
su CodePen.

La limitazione è, ovviamente, che l’altezza dell’elemento deve essere dichiarata esplicitamente, altrimenti occuperà l’intero contenitore.

Il classico top 50% translate -50%

Questo è uno dei primi, e ancora un go-to, per molti sviluppatori. Un semplice trucco, basandosi sul posizionamento assoluto dell’elemento interno al 50% dalla parte superiore del genitore, quindi traducendolo fino al 50% della sua altezza:

.container{ position: relative;}.element{ position: absolute; top: 50%; transform: translateY(-50%);}

Vedere la penna
Centraggio 2: top 50 translateY -50 di Facundo Corradini (@facundocorradini)
su CodePen.

Un approccio abbastanza solido, con l’unica limitazione principale che è l’uso di translate che potrebbe ostacolare altre trasformazioni, ad esempio quando si applicano transizioni / animazioni.

Tabelle. Si’, ho appena detto tavoli.

Un approccio molto semplice e uno dei primi (nel passato, tutto era tabelle), sta usando il comportamento delle celle della tabella e vertical-align per centrare un elemento sul contenitore.

Questo può essere fatto con le tabelle effettive (vergogna, vergogna, vergogna), o utilizzando HTML semantico, la visualizzazione dell’elemento table-cell:

.container{ display: table; height: 100%;}.element{ display: table-cell; text-align: center; vertical-align: middle;}

Vedere la Penna
Centraggio 3: tabelle di Facundo Corradini (@facundocorradini)
sul CodePen.

Funziona anche quando entrambi gli elementi sono di altezza sconosciuta. La limitazione principale è ovviamente se hai bisogno di avere un fratello non centrato, e potrebbe diventare complicato con i limiti di sfondo.

Inoltre, tieni presente che questo fallisce totalmente sugli screen reader (anche se il tuo markup è basato su div, impostando il display CSS su table e table-cell farà sì che gli screen reader lo interpretino come una tabella reale). Lontano dal meglio quando si tratta di accessibilità.

Il metodo ghost element

Un altro oldie, che non ha raggiunto per qualsiasi motivo, sta usando inline-block con un elemento ghost (pseudo) che ha il 100% di altezza del genitore, quindi imposta la proprietà vertical-align su middle:

.container::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-left: -1ch;}.element{ display: inline-block; vertical-align: middle;}

Vedi la penna
Centraggio 4: ghost element method di Facundo Corradini (@facundocorradini)
su CodePen.

In realtà funziona abbastanza bene, con il “gotcha” più evidente che sposta il centro orizzontale solo un po’ più a destra, a causa del comportamento sempre scontroso degli spazi bianchi tra elementi inline-block.

Questo può essere affrontato come si farebbe con l’inline-block problema in qualsiasi altro contesto, l’approccio più semplice essendo il margin-left -1ch che ho usato in precedenza (anche se questo non sarà preciso al 100%, tranne in caratteri a spaziatura fissa, come ch unità significa che la larghezza della “0” personaggio), o impostare la dimensione del font a 0 sul contenitore poi reimpostando il px o rem sull’elemento. Non ottimale, per dire almeno.

Margin auto su un flex-item

Finalmente entrando nel moderno territorio CSS, flexbox ha introdotto un comportamento piuttosto impressionante per i margini automatici. Ora, non solo centrerà orizzontalmente l’elemento come ha fatto nei layout di blocco, ma lo centrerà anche nell’asse verticale:

.container{ display:flex;}.element{ margin:auto;}

Vedi la penna
Centraggio 5: margin:auto su un flex-item di Facundo Corradini (@facundocorradini)
su CodePen.

Questa tattica è uno dei miei preferiti a causa della sua semplicità, l’unica limitazione importante è che funzionerà solo con un singolo elemento.

Pseudo-elementi di una flex-contenitore

Non è l’approccio più pratico nel mondo, ma possiamo anche utilizzare flessibile, vuoto pseudo elementi per spingere l’elemento al centro:

.container{ display:flex;}.element{ margin:auto;}

Vedere la Penna
Centraggio 6: fittizio su un flexbox da Facundo Corradini (@facundocorradini)
sul CodePen.

Questo può essere utile quando vogliamo mantenere una spaziatura flessibile su un contenitore flessibile orientato alla colonna con più elementi.

7 & 8. Allinea sul flex-container o sul flex-item

Flexbox ha anche introdotto proprietà di allineamento davvero grandi (che ora sono biforcate nel proprio modulo di allineamento della scatola). Ciò ci consente di controllare come vengono posizionati gli elementi e come viene distribuito lo spazio vuoto in modi che avrebbero richiesto numeri magici in CSS per un numero specifico di elementi (o un JS abbastanza intelligente per importi dinamici).

A seconda della direzione di flessione, potremmo usare justify-content o align-items per regolare secondo necessità.

Sul contenitore:

.container{ display: flex; justify-content: center; align-items: center;}

Vedere la penna
Centraggio 7: align on flex-container di Facundo Corradini (@facundocorradini)
su CodePen.

Su un particolare flex-item:

.container{ display: flex;}.element{ align-self: center; margin: 0 auto;}

Vedere la penna
Centraggio 8: allinea su flex-item di Facundo Corradini (@facundocorradini)
su CodePen.

Non molti aspetti negativi di questo, tranne se è necessario supportare i browser più vecchi. IE 11 dovrebbe funzionare, ma la sua implementazione di flexbox è piuttosto bacata, quindi dovrebbe essere sempre trattata con particolare attenzione. IE 10 richiede lavoro aggiuntivo in quanto si basa su una bozza precedente e iniziale della specifica con sintassi diversa e richiede il prefisso-ms vendor.

9 & 10. Allinea sul grid-container o sul grid-item

La griglia CSS include praticamente le stesse opzioni di allineamento di flexbox, quindi possiamo usarla sul grid-container:

.container{ display: grid; align-items: center; justify-content: center;}

Vedi la penna
Centraggio 9: allinea su grid-container di Facundo Corradini (@facundocorradini)
CodePen.

O solo su uno specifico elemento della griglia:

.container{ display: grid;}.element{ justify-self: center; align-self: center}

La mancanza di supporto del browser legacy è l’unica limitazione per questa tecnica.

Vedere la penna
Centraggio 10: align on grid-item di Facundo Corradini (@facundocorradini)
su CodePen.

Pseudo-elementi su una griglia

Analogamente all’alternativa flexbox, potremmo usare una griglia a tre righe con pseudo-elementi:

.container{ display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr);}.container::before,.container::after{ content:"";}

Ricorda che 1fr in realtà significa minmax(auto, 1fr), quindi le righe vuote non prenderanno necessariamente un terzo dell’altezza del contenitore. Crolleranno se necessario fino al loro valore minimo di auto, e senza contenuto, significa 0.

Vedere la penna
Centraggio 11 : griglia + pseudos di Facundo Corradini (@facundocorradini)
su CodePen.

Questo potrebbe sembrare un approccio sciocco, ma ci permette di estrarre facilmente uno dei miei trucchi preferiti della griglia CSS: combinare le righe fr con quelle minmax, che faranno collassare prima quelle vuote, poi quelle mixmax. Jenn Simmons ha grandi esempi su questo.

Quindi, avere gli pseudos prendere le righe completamente pieghevoli permetterà all’algoritmo di auto-posizionamento di lavorare la sua magia sui nostri elementi reali. Tranne se abbiamo bisogno di supportare IE, che manca di auto-posizionamento. Il che ci porta al metodo successivo

Posizionamento esplicito della riga della griglia

La griglia CSS consente di posizionare esplicitamente gli elementi su una riga specifica, quindi la stessa dichiarazione della griglia di cui sopra e l’elemento posizionato sulla seconda riga sarà sufficiente:

.container{ display:grid; grid-template-columns:1fr; grid-template-rows: repeat(3, 1fr);}.element{ grid-row: 2 / span 1; /* or grid-row: 2/3 */}

Questo può funzionare fino a IE10. Che ci crediate o no, IE è stato uno dei primi e più forti sostenitori per CSS grid, spedendolo fino in fondo nel 2011 con IE10. Si basa su una bozza molto precoce che ha una sintassi completamente diversa, ma possiamo farlo funzionare:

.container{ display: -ms-grid; -ms-grid-rows: (1fr); -ms-grid-columns: 1fr;}.element{ -ms-grid-column: 1; -ms-grid-row: 2;}

Vedi la penna
Centraggio 12 : posizionamento esplicito su una griglia di Facundo Corradini (@facundocorradini)
su CodePen.

Margin auto su un grid-item

Analogamente a flexbox, l’applicazione margin-auto su un grid-item lo centra su entrambi gli assi.

.container{ display: grid;}.element{ margin: auto;}

Vedere la Penna
Centraggio 12 : posizionamento esplicito su una griglia di Facundo Corradini (@facundocorradini)
su CodePen.

Alcune (probabili) implementazioni future

Secondo la specifica CSS Box Alignment Module level 3, align-content dovrebbe funzionare sull’asse del blocco dei contenitori a blocchi e dei contenitori multicol, quindi (se i browser lo implementano) dovremmo essere in grado di centrare il contenuto di quei contenitori proprio come facciamo nei contenitori flex o grid.

Conclusione