Guida CSS interattiva: Centrare un div

Q: Come centro un div solo in orizzontale?

Dagli una larghezza e margini laterali automatici: .box { width: 300px; margin: 0 auto; } (oppure max-width per un blocco responsive). margin-inline: auto è la stessa cosa con le proprietà logiche.

Q: Qual è il modo più semplice per centrare un div?

display: grid; place-items: center; sul genitore: due dichiarazioni, entrambi gli assi, un figlio di qualsiasi dimensione. Usa flexbox quando il genitore dispone anche altri elementi in riga.

Q: Come centro il testo dentro un div?

Usa text-align: center sul div per il testo e il contenuto inline. Centrare il div e centrare il testo al suo interno sono due compiti separati.

La risposta breve

Per centrare un div sia in orizzontale sia in verticale dentro il suo genitore, trasforma il genitore in una griglia e centrane il contenuto:

.parent {
  display: grid;
  place-items: center;
  min-height: 200px; /* the parent needs room to center in */
}

Funziona con un figlio di qualsiasi dimensione e non richiede nulla sul figlio. Qui sotto trovi sei metodi a confronto. Ogni box si misura dopo il rendering e stampa quanto dista il suo centro dal centro del genitore:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Six ways to center</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 12px; margin: 8px; }
    .grid-of-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
    .stage { height: 130px; background: #e5e7eb; border: 1px solid #9ca3af; }
    .box { width: 100px; padding: 8px; background: #2563eb; color: white; text-align: center; }
    p { margin: 4px 0 0; }

    .flex { display: flex; justify-content: center; align-items: center; }
    .grid { display: grid; place-items: center; }
    .auto { display: flex; }
    .auto .box { margin: auto; }
    .abs { position: relative; }
    .abs .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .inset { position: relative; }
    .inset .box { position: absolute; inset: 0; margin: auto; height: 20px; }
    .content { align-content: center; }
    .content .box { margin-inline: auto; }
  </style>
</head>
<body>
  <div class="grid-of-demos">
    <div><div class="stage flex"><div class="box">flex</div></div><p></p></div>
    <div><div class="stage grid"><div class="box">grid</div></div><p></p></div>
    <div><div class="stage auto"><div class="box">margin: auto</div></div><p></p></div>
    <div><div class="stage abs"><div class="box">absolute</div></div><p></p></div>
    <div><div class="stage inset"><div class="box">inset: 0</div></div><p></p></div>
    <div><div class="stage content"><div class="box">align-content</div></div><p></p></div>
  </div>
  <script>
    document.querySelectorAll('.stage').forEach((stage) => {
      const s = stage.getBoundingClientRect();
      const b = stage.querySelector('.box').getBoundingClientRect();
      const dx = (b.left + b.width / 2) - (s.left + s.width / 2);
      const dy = (b.top + b.height / 2) - (s.top + s.height / 2);
      stage.nextElementSibling.textContent =
        'off center: x ' + Math.round(dx) + 'px, y ' + Math.round(dy) + 'px';
    });
  </script>
</body>
</html>

Tutti e sei riportano 0px su entrambi gli assi (il bordo di 1px del contenitore è uguale su ogni lato, quindi non sposta il centro). Cambia la larghezza o il testo di un box ed eseguilo di nuovo: i metodi che non dipendono da una dimensione fissa restano a 0.

Quale metodo usare

Metodo	Centra	Serve una dimensione fissa al figlio?	Ideale per
Grid `place-items: center`	Entrambi gli assi	No	La scelta predefinita: un figlio in un box
Flexbox `justify-content` + `align-items`	Entrambi gli assi	No	Una riga o colonna di elementi, centrati come gruppo
`margin: auto` in un genitore flex o grid	Entrambi gli assi	No	Centrare un elemento mentre i suoi fratelli sono disposti in altro modo
`margin: 0 auto`	Solo in orizzontale	Un `width` o `max-width`	Contenitori di pagina, articoli, moduli nel flusso normale
Absolute + `translate(-50%, -50%)`	Entrambi gli assi	No	Overlay, badge e modali sopra altri contenuti
Absolute + `inset: 0; margin: auto`	Entrambi gli assi	Sì, larghezza e altezza	Finestre di dialogo a dimensione fissa
`align-content: center` su un blocco	In verticale	No	Centraggio verticale senza cambiare il display del genitore

Metodo 1: flexbox

Flexbox centra lungo due assi con due proprietà. justify-content gestisce l'asse principale (orizzontale in una riga), e align-items l'asse trasversale:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with flexbox</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: flex;
      justify-content: center; /* horizontal */
      align-items: center;     /* vertical */
      gap: 8px;
      height: 180px;
      background: #e5e7eb;
    }
    .child { padding: 12px 16px; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="child">One</div>
    <div class="child">Two</div>
    <div class="child">Three</div>
  </div>
</body>
</html>

Con più figli, flexbox li centra come gruppo, mantenendoli in riga. È qui che batte grid, che impilerebbe i tre elementi in un'unica colonna centrata. La pagina su justify-content spiega tutti i valori di allineamento.

Metodo 2: grid

place-items: center è la forma abbreviata di align-items: center più justify-items: center. Su un contenitore grid con un solo figlio, centra quel figlio in entrambe le direzioni:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: grid;
      place-items: center;
      min-height: 180px;
      background: #e5e7eb;
    }
    .card { max-width: 220px; padding: 16px; background: white; border: 2px solid #2563eb; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="card" id="card">A card of any size, centered by its parent.</div>
  </div>
</body>
</html>

min-height invece di height permette al genitore di crescere se la scheda diventa più alta di 180px, invece di far uscire la scheda.

Metodo 3: margin: 0 auto (orizzontale)

Un elemento di blocco con una larghezza minore del suo contenitore si può centrare in orizzontale con margini laterali automatici. Il browser divide lo spazio libero in parti uguali tra i due lati:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      max-width: 360px;
      margin: 0 auto;          /* same as margin-inline: auto */
      padding: 16px;
      background: #fef3c7; border: 2px solid #f59e0b;
    }
    .no-width { margin: 12px auto 0; padding: 16px; background: #fee2e2; border: 2px solid #dc2626; }
  </style>
</head>
<body>
  <div class="page" id="page">max-width: 360px and margin: 0 auto</div>
  <div class="no-width" id="nowidth">margin: auto without a width: nothing to center</div>
</body>
</html>

Il secondo box occupa tutta la larghezza, quindi non c'è spazio libero e non si sposta nulla. È il motivo più comune per cui margin: 0 auto "non funziona". Inoltre nel flusso normale centra solo in orizzontale; lì i margini verticali auto diventano 0. Dentro un genitore flex o grid, invece, margin: auto centra in entrambe le direzioni, ed è il terzo box del confronto qui sopra.

Metodo 4: posizione assoluta e transform

Quando l'elemento deve stare sopra altri contenuti (un badge su una foto, una modale sopra la pagina), posizionalo in modo assoluto al 50% e riportalo indietro di metà della sua dimensione:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .photo {
      position: relative;      /* the reference box */
      height: 180px;
      background: linear-gradient(135deg, #bfdbfe, #1e3a8a);
    }
    .play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: white; border-radius: 999px; font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo">
    <div class="play" id="play">Play</div>
  </div>
</body>
</html>

top: 50%; left: 50% mette l'angolo in alto a sinistra dell'elemento al centro. Le percentuali in translate() si riferiscono alla dimensione dell'elemento stesso, quindi -50% lo riporta indietro di metà della sua larghezza e altezza, qualunque esse siano. Il genitore deve essere posizionato (position: relative), altrimenti l'elemento si centra rispetto alla pagina. Il posizionamento è spiegato nella pagina su position.

Una variante per elementi di dimensione nota: position: absolute; inset: 0; margin: auto; più un width e un height. I margini automatici si dividono lo spazio su tutti e quattro i lati.

Metodo 5: align-content su un blocco normale

align-content: center ora funziona anche sui normali contenitori di blocco, non solo su quelli flex e grid. Centra il contenuto in verticale senza cambiare il modo in cui sono disposti i figli:

.parent {
  min-height: 200px;
  align-content: center;   /* vertical centering, still display: block */
}
.child {
  max-width: 300px;
  margin-inline: auto;     /* horizontal centering */
}

È supportato nelle versioni attuali di Chrome, Firefox e Safari. I browser più vecchi lo ignorano, quindi usa grid se devi supportarli.

Centrare in tutto lo schermo

Per centrare una finestra di dialogo nel viewport indipendentemente dallo scorrimento, combina uno strato fisso a schermo intero con grid:

.overlay {
  position: fixed;
  inset: 0;                     /* covers the viewport */
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 50%);
}

Per centrare in verticale il contenuto di un'intera pagina, usa min-height: 100dvh sul genitore invece di 100vh: sui telefoni, 100vh include l'area dietro le barre del browser, quindi il "centro" finisce troppo in basso.

Centrare il testo è un altro compito

Tutto ciò che hai visto sopra centra un box. Per centrare il testo dentro un box, usa text-align: center sul box, come mostra la pagina su come centrare il testo in HTML. Spesso servono entrambi: grid per centrare la scheda e text-align per centrare le righe al suo interno.

Errori comuni

Un genitore senza altezza. Il centraggio verticale richiede spazio libero; un genitore che si restringe al contenuto non ne ha.
margin: 0 auto su un blocco a tutta larghezza. Prima dagli un width o un max-width.
margin: auto per centrare in verticale nel flusso normale. Lì i margini verticali automatici valgono 0; usa flex o grid.
Centraggio assoluto senza un genitore posizionato. L'elemento si centra nella pagina, non nel box.
align-items: center sul figlio. Le proprietà di allineamento vanno sul genitore (il contenitore flex o grid), tranne margin: auto e align-self.
text-align: center per centrare un blocco. Centra il contenuto inline (testo, immagini, figli inline-block), non un figlio di blocco.

Domande frequenti

Come centro un div in orizzontale e in verticale?

Trasforma il genitore in una griglia e centrane il contenuto: .parent { display: grid; place-items: center; }. La versione con flexbox è display: flex; justify-content: center; align-items: center;. In entrambi i casi il genitore deve avere un'altezza maggiore del div.

Come centro un div solo in orizzontale?

Dagli una larghezza e margini laterali automatici: .box { width: 300px; margin: 0 auto; } (oppure max-width per un blocco responsive). margin-inline: auto è la stessa cosa con le proprietà logiche.

Perché margin: 0 auto non centra il mio div?

Il div non ha una larghezza minore del suo contenitore, quindi non c'è spazio libero da dividere (per impostazione predefinita un blocco occupa tutta la larghezza). Imposta width o max-width. Inoltre non ha effetto sugli elementi inline e nel flusso normale non centra mai in verticale.

Perché il mio div non si centra in verticale?

Il genitore è alto solo quanto il suo contenuto, quindi non c'è spazio in più in cui centrare. Dai un'altezza al genitore (o un min-height), poi usa il centraggio con grid o flexbox.

Qual è il modo più semplice per centrare un div?

display: grid; place-items: center; sul genitore: due dichiarazioni, entrambi gli assi, un figlio di qualsiasi dimensione. Usa flexbox quando il genitore dispone anche altri elementi in riga.

Come centro il testo dentro un div?

Usa text-align: center sul div per il testo e il contenuto inline. Centrare il div e centrare il testo al suo interno sono due compiti separati.

Concetti correlati