Tag HTML <center>
Il tag <center> allinea il contenuto al centro. Il suo equivalente in CSS è la proprietà text-align. Guarda gli esempi.
Il tag HTML <center> è obsoleto e non deve essere utilizzato nelle nuove pagine. Era un elemento a livello di blocco che centrava orizzontalmente tutto ciò che conteneva, ma è stato rimosso dallo standard HTML e non è più supportato in HTML5. I browser moderni potrebbero ancora renderizzarlo per compatibilità con le versioni precedenti, ma il suo comportamento non è garantito e non supererà la validazione.
Questa pagina spiega cosa faceva <center> e, soprattutto, mostra le tecniche CSS che lo sostituiscono: text-align: center per il contenuto inline, margin: 0 auto per gli elementi a blocco e Flexbox per centrare sia orizzontalmente che verticalmente.
Il tag <center> è un tag HTML deprecato e non è supportato in HTML5. La presentazione appartiene al CSS, non al markup HTML. Usa invece le tecniche CSS descritte di seguito.
La differenza concettuale: centrare inline o blocco
Prima di scegliere una tecnica, decidi cosa stai centrando. Questa è la fonte di confusione più comune.
- Centrare contenuto inline (testo, immagini, elementi inline) all'interno di un contenitore: usa
text-align: centersul contenitore. Il contenitore mantiene la sua larghezza completa; solo il suo contenuto si sposta al centro. - Centrare un elemento a blocco (un
<div>, un<section>, una card) all'interno del suo genitore: usamargin: 0 autosull'elemento a blocco stesso. L'elemento deve avere una larghezza inferiore a quella del genitore, altrimenti occupa già tutta la riga e non c'è nulla da centrare.
In sintesi: text-align centra gli elementi all'interno di un box; margin: auto centra il box stesso.
Centrare il contenuto inline con text-align
Applica text-align: center all'elemento genitore. Le dimensioni dell'elemento non cambiano — viene centrato solo il contenuto al suo interno.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This text is aligned to the left.</p>
<p style="text-align:center">And this one is placed in the center.</p>
</body>
</html>Questa è la sostituzione diretta di <center> quando si vuole semplicemente centrare del testo.
Centrare un elemento a blocco con margin: 0 auto
Per centrare orizzontalmente un elemento a livello di blocco all'interno del suo genitore, assegnagli una width e imposta i margini sinistro e destro su auto. Il browser suddivide quindi lo spazio orizzontale rimanente in parti uguali su entrambi i lati.
margin: 0 auto è una scorciatoia per "0 su/giù, auto sinistra/destra." Internamente imposta lo stesso valore auto sia per margin-left che per margin-right.
La width è obbligatoria. Un elemento a blocco senza larghezza definita occupa il 100% del genitore per impostazione predefinita, senza lasciare spazio libero da distribuire ai margini auto — quindi non si nota alcuno spostamento. Una volta che l'elemento è più stretto del genitore, i margini auto lo centrano.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div style="margin:0 auto; width:50%; background:#eee;">
This block is centered horizontally.
</div>
</body>
</html>Nota che margin: auto centra solo orizzontalmente — non centra un blocco verticalmente.
Centrare in entrambe le direzioni con Flexbox
Quando è necessario centrare il contenuto orizzontalmente e verticalmente allo stesso tempo, Flexbox è la scelta moderna e affidabile. Rendi il contenitore un flex container, quindi usa justify-content: center per l'asse orizzontale e align-items: center per l'asse verticale.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div style="display:flex; justify-content:center; align-items:center;
height:200px; border:1px solid #ccc;">
<p>This box is centered both horizontally and vertically.</p>
</div>
</body>
</html>Qui display:flex trasforma il <div> in un flex container, justify-content:center centra i suoi figli lungo l'asse principale (orizzontale) e align-items:center li centra lungo l'asse trasversale (verticale). L'height è impostata in modo che ci sia spazio verticale entro cui centrare.
Per una guida completa su queste proprietà e sul resto del modello di layout, consulta The Ultimate Guide to Flexbox.
Come appariva il vecchio tag <center>
Solo per riferimento — non usarlo nel nuovo codice. Il tag <center> si usava in coppia e centrava tutto ciò che si trovava tra il tag di apertura e quello di chiusura:
<p>This text is aligned to the left.</p>
<center>And this one is placed in the center.</center>Il markup moderno equivalente è semplicemente <p style="text-align:center">…</p>, come mostrato sopra.