Come centrare qualsiasi cosa con CSS - Allinea un div, un testo e altro

Centrare le cose è uno degli aspetti più difficili dei CSS.

I metodi stessi di solito non sono difficili da capire. Invece, è più dovuto al fatto che ci sono tanti modi per centrare le cose.

Il metodo che utilizzi può variare a seconda dell'elemento HTML che stai cercando di centrare o se lo stai centrando orizzontalmente o verticalmente.

In questo tutorial, esamineremo come centrare diversi elementi orizzontalmente, verticalmente e sia verticalmente che orizzontalmente.

Come centrare orizzontalmente

Centrare gli elementi orizzontalmente è generalmente più facile che centrarli verticalmente. Ecco alcuni elementi comuni che potresti voler centrare orizzontalmente e diversi modi per farlo.

Come centrare il testo con la proprietà CSS Text-Align Center

Per centrare il testo o i collegamenti orizzontalmente, usa semplicemente la text-alignproprietà con il valore center:

Hello, (centered) World!

p { text-align: center; }

Come centrare un div con CSS Margin Auto

Usa la marginproprietà abbreviazione con il valore 0 autoper centrare divorizzontalmente gli elementi a livello di blocco come un :

.child { ... margin: 0 auto; }

Come centrare orizzontalmente un div con Flexbox

Flexbox è il modo più moderno per centrare le cose sulla pagina e rende la progettazione di layout reattivi molto più semplice di quanto non fosse in passato. Tuttavia, non è completamente supportato in alcuni browser legacy come Internet Explorer.

Per centrare un elemento orizzontalmente con Flexbox, basta applicare display: flexe justify-content: centerall'elemento genitore:

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

Come centrare verticalmente

Centrare elementi verticalmente senza metodi moderni come Flexbox può essere un vero lavoro di routine. Qui esamineremo alcuni dei metodi precedenti per centrare prima le cose verticalmente, quindi ti mostreremo come farlo con Flexbox.

Come centrare verticalmente un div con posizionamento assoluto CSS e margini negativi

Per molto tempo questo è stato il modo migliore per centrare le cose verticalmente. Per questo metodo devi conoscere l'altezza dell'elemento che vuoi centrare.

Innanzitutto, imposta la displayproprietà dell'elemento genitore su relative.

Quindi per l'elemento figlio, imposta la displayproprietà su absolutee topsu 50%:

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }

Ma questo centra solo verticalmente il bordo superiore dell'elemento figlio.

Per centrare veramente l'elemento figlio, imposta la margin-topproprietà su -(half the child element's height):

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }

Come centrare verticalmente un div con Transform and Translate

Se non conosci l'altezza dell'elemento che vuoi centrare (o anche se lo fai), questo metodo è un trucco ingegnoso.

Questo metodo è molto simile al metodo dei margini negativi sopra. Imposta la displayproprietà dell'elemento genitore su relative.

Per l'elemento figlio, impostare la displayproprietà su absolutee topsu 50%. Ora invece di usare un margine negativo per centrare veramente l'elemento figlio, usa semplicemente transform: translate(0, -50%):

.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }

Nota che translate(0, -50%)è una scorciatoia per translateX(0)e translateY(-50%). Puoi anche scrivere transform: translateY(-50%)per centrare l'elemento figlio verticalmente.

Come centrare verticalmente un div con Flexbox

Come centrare le cose orizzontalmente, Flexbox rende semplicissimo centrare le cose verticalmente.

Per centrare un elemento verticalmente, applica display: flexe align-items: centerall'elemento genitore:

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

Come centrare sia verticalmente che orizzontalmente

Come centrare un div verticalmente e orizzontalmente con CSS Absolute Positioning e Negative Margins

Questo è molto simile al metodo sopra per centrare un elemento verticalmente. Come l'ultima volta, devi conoscere la larghezza e l'altezza dell'elemento che vuoi centrare.

Imposta la displayproprietà dell'elemento genitore su relative.

Quindi impostare la displayproprietà del bambino su absolute, topsu 50%e leftsu 50%. Questo centra l'angolo superiore sinistro dell'elemento figlio verticalmente e orizzontalmente.

Per centrare veramente l'elemento figlio, applica un margine superiore negativo impostato a metà dell'altezza dell'elemento figlio e un margine sinistro negativo impostato a metà della larghezza dell'elemento figlio:

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }

Come centrare un div verticalmente e orizzontalmente con Transform and Translate

Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.

First, set the display property of the parent element to relative.

Next, set the child element's display property to absolute, top to 50%, and left to 50%.

Finally, use transform: translate(-50%, -50%) to truly center the child element:

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

How to Center a Div Vertically and Horizontally with Flexbox

Flexbox is the easiest way to center an element both vertically and horizontally.

This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:

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

That's everything you need to know to center with the best of 'em. Now go forth and center all the things.