Centrare una div in CSS: orizzontale, verticale, Flexbox o Grid

Centrare una div in CSS ha richiesto a lungo qualche trucco. Non è più così: tre righe di Flexbox centrano qualsiasi elemento nel suo contenitore, in orizzontale e in verticale. L’articolo parte da questa risposta breve, poi entra nel dettaglio di ogni situazione, dal centrare un’immagine al centrare un pulsante, con l’alternativa Grid e gli errori che fanno credere che «non funziona».

La risposta breve

.conteneur {
  display: flex;
  justify-content: center; /* orizzontale */
  align-items: center;     /* verticale */
}

<div class="conteneur">
  <div class="boite">Je suis centrée</div>
</div>

Le due proprietà vanno sul genitore, mai sull’elemento da centrare. E il centraggio verticale si vede solo se il genitore ha un’altezza maggiore del suo contenuto: è la prima cosa da controllare quando non si muove nulla.

Centrare in orizzontale

Con Flexbox

justify-content distribuisce i figli lungo l’asse principale, orizzontale per impostazione predefinita. center li raggruppa al centro.

.conteneur {
  display: flex;
  justify-content: center;
  gap: 1rem; /* spazio tra più figli centrati */
}

Con più figli, restano affiancati e centrati come gruppo. È il caso dei due paragrafi o delle due immagini dell’esempio storico di questo articolo.

Con margin auto

Senza Flexbox, un blocco di larghezza nota si centra con i margini automatici:

.boite {
  width: 320px;      /* oppure max-width: indispensabile */
  margin: 0 auto;
}

Senza width né max-width, il box occupa tutta la larghezza disponibile e i margini automatici valgono zero. È il metodo da ricordare per centrare una colonna di contenuto dentro una pagina.

Con text-align

text-align: center centra il contenuto in linea di un blocco: testo, un link, un’immagine inline. Non centra il blocco stesso dentro il suo genitore.

.titre {
  text-align: center; /* centra il testo dentro .titre */
}

Centrare in verticale

align-items governa l’asse trasversale, verticale per impostazione predefinita. Il contenitore deve avere un’altezza perché il centraggio si veda.

.conteneur {
  display: flex;
  align-items: center;
  height: 300px;
}

Per centrare in verticale un solo figlio e lasciare gli altri in alto, align-self si mette su quel figlio:

.conteneur .dernier {
  align-self: center;
}

Altra scrittura, spesso più corta: margin: auto sul figlio di un contenitore flex lo centra nelle due direzioni, assorbendo tutto lo spazio libero.

.conteneur { display: flex; height: 300px; }
.boite     { margin: auto; }

Centrare su tutta la pagina

Una schermata di accesso, un messaggio di errore, una pagina di attesa: l’elemento deve stare al centro della finestra. Il contenitore prende tutta l’altezza visibile con min-height: 100vh.

body {
  margin: 0;
}

.page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 100% dell'altezza della finestra */
}

min-height anziché height: se il contenuto supera la finestra su uno schermo piccolo, il contenitore si allarga invece di tagliare. Su mobile, 100dvh (altezza dinamica, che tiene conto delle barre del browser) è ancora più preciso ed è supportato dai browser attuali.

Centrare un’immagine

Un’immagine è un elemento in linea: dentro un blocco, text-align: center sul genitore la centra in orizzontale. Per centrarla nei due sensi, o dentro una cornice di dimensione fissa, Flexbox è più semplice.

/* Solo orizzontale */
figure {
  text-align: center;
}

/* Orizzontale e verticale, dentro una miniatura quadrata */
.vignette {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.vignette img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

Un’immagine sola dentro una colonna si centra anche come blocco: display: block; margin: 0 auto; con una larghezza o una larghezza massima.

Centrare un testo e un pulsante

Un testo si centra con text-align: center sul suo blocco. Un pulsante è un elemento inline-block: la stessa proprietà sul suo genitore lo centra in orizzontale.

.actions {
  text-align: center;
}

/* Per centrare più pulsanti con una spaziatura regolare */
.actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

Per centrare il testo dentro un pulsante di altezza fissa, è il pulsante stesso a diventare un contenitore flex: display: inline-flex; align-items: center; justify-content: center;.

L’alternativa Grid: una sola riga

CSS Grid centra un figlio unico con una sola dichiarazione:

.conteneur {
  display: grid;
  place-items: center; /* align-items + justify-items */
  min-height: 100vh;
}

Qui Grid e Flexbox danno lo stesso risultato. Grid è più corto per un solo elemento; Flexbox resta più naturale per allineare una fila di elementi. La scelta tra i due modelli per un’impaginazione completa è approfondita in Grid o Flexbox.

position absolute + transform: il caso delle sovrapposizioni

Quando l’elemento da centrare è uscito dal flusso, per esempio un tooltip o una finestra modale appoggiata sopra la pagina, lo si posiziona al 50% e poi lo si arretra della metà della sua stessa dimensione:

.parent {
  position: relative;
}

.modale {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Il metodo funziona senza conoscere la dimensione dell’elemento, ma può rendere il testo leggermente sfocato quando la traslazione cade su mezzo pixel. Per una modale a tutto schermo, un contenitore position: fixed; inset: 0; display: grid; place-items: center; evita il problema.

Perché «non funziona»: i cinque errori

1. Il genitore non ha altezza. Il centraggio verticale è relativo all’altezza del contenitore; senza altezza non c’è nulla da centrare. Aggiungi min-height.
2. Le proprietà sono sul figlio. justify-content e align-items vanno sul genitore. Sul figlio agiscono solo align-self e margin: auto.
3. margin: 0 auto senza larghezza. Il blocco occupa già il 100%: dagli una width o una max-width.
4. text-align: center per centrare una div. Centra il testo all’interno, non il box. Usa Flexbox o i margini automatici.
5. height: 100% che non fa nulla. Una percentuale di altezza vale solo se il genitore ha a sua volta un’altezza definita, risalendo fino a html. 100vh e 100dvh non dipendono dal genitore.

Riepilogo

Per andare oltre il centraggio, la guida completa a Flexbox passa in rassegna tutte le proprietà del contenitore e dei figli.