Come centrare un div: 7 metodi CSS, dal vivo e a confronto | We.Inc
Centra un div in orizzontale, in verticale o in entrambe le direzioni. Attiva flexbox, grid, margin auto, posizionamento assoluto, text-align e line-height sullo stesso box, guarda il CSS e quando ognuno si rompe.
Per centrare un div in entrambe le direzioni bastano due righe sul genitore: display: grid; place-items: center; oppure display: flex con justify-content: center e align-items: center. Solo in orizzontale, dai al div una larghezza e margin-inline: auto. Perché la centratura verticale si veda, il genitore deve essere più alto del figlio.
La versione breve
Esigenza
CSS sul genitore
Tailwind
Entrambe le direzioni
display: grid; place-items: center
grid place-items-center
Entrambe le direzioni
display: flex; justify-content: center; align-items: center
flex items-center justify-center
Blocco orizzontale
(sul figlio) margin-inline: auto + una larghezza
mx-auto w-…
Sopra un'immagine
position: relative, figlio inset: 0 + margin: auto
relative / absolute inset-0 m-auto
Scegli un metodo e un asse: il box di prova si sposta, il CSS per genitore e figlio viene scritto per intero e una nota spiega dove quel metodo si rompe. Sono coperte sette tecniche, comprese quelle vecchie che incontrerai ancora nel codice esistente, seguite da una tabella decisionale per sceglierne una.
Scegli orizzontale, verticale o entrambi.
Passa in rassegna i metodi. Quelli che non possono gestire l'asse scelto lo dicono invece di far finta.
Leggi la nota sui limiti del metodo, poi copia il CSS o le classi Tailwind.
Consulta la tabella decisionale qui sotto quando non sei sicuro di quale usare.
Quando qualcosa non si centra in verticale, metti prima un outline sul genitore. Nove volte su dieci è alto solo quanto il suo contenuto.
Nel codice nuovo preferisci grid o flex. Mantengono il figlio nel flusso, quindi il genitore continua a crescere attorno a lui.
Per centrare un blocco di testo mantenendo le righe allineate a sinistra, centra il blocco con margin-inline: auto e non toccare text-align.
margin: auto su un figlio flex è un trucco elegante: assorbe lo spazio libero su ogni lato e centra solo quell'elemento.
Domande frequenti
Perché il mio div non si centra in verticale?
Di solito perché il genitore non ha altezza in più. Un blocco è alto solo quanto il suo contenuto, quindi non c'è spazio in cui centrare. Dai al genitore una height, una min-height (per esempio 100dvh per lo schermo intero) oppure lascialo allungarsi dentro un layout flex o grid più alto.
Qual è il modo più breve per centrare un div?
display: grid; place-items: center; sul genitore. Centra il figlio in entrambe le direzioni, funziona con qualsiasi dimensione del figlio e non richiede width o height sul figlio.
Come centro un div sull'intera pagina?
Rendi body o un wrapper alto almeno quanto il viewport: min-height: 100dvh; display: grid; place-items: center;. Per un modale che fluttua sopra la pagina, usa position: fixed; inset: 0; margin: auto; con larghezza e altezza definite, oppure l'elemento nativo dialog, che si centra da solo.
margin: 0 auto funziona ancora?
Sì, per centrare in orizzontale un blocco con una larghezza minore di quella del genitore. margin-inline: auto è la forma logica moderna e non tocca i margini superiore e inferiore.
Come centro un div in Tailwind?
Metti flex items-center justify-center, oppure grid place-items-center, sul genitore e dagli un'altezza come h-screen o min-h-dvh. Per un blocco centrato in orizzontale, aggiungi mx-auto e una larghezza o max-width al figlio.
Due direzioni, due problemi diversi
Centrare in orizzontale è facile nel layout a blocchi perché la larghezza è nota: quella del genitore è fissata dal suo contenitore, quindi i margini auto possono dividersi lo spazio avanzato. L'altezza è l'opposto, la decide il contenuto, ed è per questo che per anni la centratura verticale ha richiesto dei trucchi.
Flexbox e grid hanno cambiato le cose permettendo al genitore di distribuire lo spazio libero su entrambi gli assi. Una volta che il genitore ha un'altezza nota, le proprietà di allineamento fanno il resto e il figlio resta parte del flusso normale.
Quando i vecchi metodi hanno ancora senso
Il posizionamento assoluto è giusto quando l'elemento centrato deve fluttuare sopra altri contenuti, come un pulsante play sopra la miniatura di un video o uno spinner sopra una card. La versione con inset più margin auto evita i bordi sfocati da mezzo pixel che un translate può produrre.
text-align resta il modo più rapido per centrare un'icona o un pulsante inline dentro una riga di testo. La centratura con line-height va usata solo in badge su una riga che controlli completamente.
Tabella decisionale
Quale metodo per quale compito
Metodo
Orizzontale
Verticale
Entrambi
Attenzione a
Flexbox
Sì
Sì
Sì
La centratura verticale richiede che il genitore sia più alto del figlio. Con flex-direction: column le due proprietà si scambiano gli assi.
Grid place-items
Sì
Sì
Sì
Più figli si impilano in righe, ognuno centrato nella propria riga, quindi si distribuiscono in verticale invece di restare uniti. Racchiudili in un unico elemento.
margin: auto
Sì
No
No
Nel normale flusso a blocchi centra solo in orizzontale, e solo quando il figlio ha una larghezza minore del genitore. Dentro un genitore flex o grid, margin: auto centra in entrambe le direzioni.
Absolute + transform
Sì
Sì
Sì
Il figlio esce dal flusso, quindi il genitore non cresce più attorno a lui. Gli spostamenti di mezzo pixel possono sfocare il testo, e il transform rende il figlio un containing block e uno stacking context.
Absolute inset + margin auto
Sì
Sì
Sì
Il figlio ha bisogno di una dimensione esplicita sull'asse centrato. Senza, inset: 0 si limita ad allungare il figlio fino a riempire il genitore. Nei browser attuali funzionano anche le larghezze fit-content.
text-align: center
Sì
No
No
Sposta solo i contenuti inline: testo, immagini, box inline-block. Un normale div a blocco lo ignora, e anche il testo dentro il figlio eredita la centratura.
No
Sì
Sì
Si rompe appena il testo va a capo su una seconda riga, e l'altezza va scritta a mano due volte. Va bene per un badge o un pulsante su una riga, per nient'altro.
Ricette pronte da copiare
Una card al centro dello schermo
In una pagina reale usa min-height: 100dvh sul wrapper. Il riquadro qui usa un'altezza fissa per starci dentro.
Pulsante play sopra una miniatura
inset: 0 con margin: auto centra un figlio di dimensione fissa senza transform, così i bordi restano nitidi.
Un elemento al centro, gli altri ai bordi
I margini auto su un figlio flex prendono tutto lo spazio libero, così il logo sta al centro della barra mentre menu e carrello restano ai lati.
La centratura verticale richiede che il genitore sia più alto del figlio. Con flex-direction: column le due proprietà si scambiano gli assi.
Più figli si impilano in righe, ognuno centrato nella propria riga, quindi si distribuiscono in verticale invece di restare uniti. Racchiudili in un unico elemento.
Nel normale flusso a blocchi centra solo in orizzontale, e solo quando il figlio ha una larghezza minore del genitore. Dentro un genitore flex o grid, margin: auto centra in entrambe le direzioni.
Il figlio esce dal flusso, quindi il genitore non cresce più attorno a lui. Gli spostamenti di mezzo pixel possono sfocare il testo, e il transform rende il figlio un containing block e uno stacking context.
Il figlio ha bisogno di una dimensione esplicita sull'asse centrato. Senza, inset: 0 si limita ad allungare il figlio fino a riempire il genitore. Nei browser attuali funzionano anche le larghezze fit-content.
Sposta solo i contenuti inline: testo, immagini, box inline-block. Un normale div a blocco lo ignora, e anche il testo dentro il figlio eredita la centratura.
Si rompe appena il testo va a capo su una seconda riga, e l'altezza va scritta a mano due volte. Va bene per un badge o un pulsante su una riga, per nient'altro.
Prova ogni metodo di centratura
Asse
Centra
Metodo
Genitore (tratteggiato) e figlio (blu)
Box figlio
Questo metodo non può gestire quell'asse. Il box mostra dove finisce senza.