Articolo originale: How to Center Anything with CSS - Align a Div, Text, and More di Kris Koishigawa

Tradotto e adattato da: Alessia Vanni

Centrare gli oggetti è uno degli aspetti più difficili di CSS.

I metodi in sé non sono complicati da capire. Invece, è più a causa del fatto che ci sono molti modi di centrare gli oggetti.

Il metodo utilizzato può variare a seconda dell'elemento HTML che stai provando a centrare, o se lo stai centrando orizzontalmente o verticalmente.

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

Come centrare orizzontalmente

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

Come Centrare del Testo con la Proprietà Text-Align Center di CSS

Per centrare del testo o dei link orizzontalmente, usa semplicemente la proprietà text-align con il valore center:

<div class="container">
  <p>Hello, (centered) World!</p>
</div>
p {
  text-align: center;
}
image-15

Come Centrare un Div con Margin Auto in CSS

Usa la proprietà abbreviata margin con il valore 0 auto per centrare orizzontalmente elementi a livello di blocco, come un div:

<div class="container">
  <div class="child"></div>
</div>
.child {
  ...
  margin: 0 auto;
}
box-centered-horizontally

Come Centrare Orizzontalmente un Div con Flexbox

Flexbox è il modo più moderno per centrare gli oggetti nella pagina, e rende la progettazione di layout responsivi molto più facile di quanto non fosse in passato. Tuttavia, non è completamente supportato da alcuni browser più vecchi come Internet Explorer.

Per centrare un elemento orizzontalmente con Flexbox, applica semplicemente  display: flex e justify-content: center all'elemento genitore:

<div class="container">
  <div class="child"></div>
</div>
.container {
  ...
  display: flex;
  justify-content: center;
}
box-centered-horizontally-1

Come Centrare Verticalmente

Centrare elementi verticalmente senza metodi moderni come Flexbox può essere davvero un lavoro ingrato. Qui vedremo per prima cosa alcuni dei vecchi metodi per centrare gli oggetti verticalmente, poi mostreremo come farlo con Flexbox.

Come Centrare Verticalmente un Div in CSS con il Posizionamento Assoluto e i 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.

Per prima cosa, imposta la proprietà position dell'elemento genitore a relative.

Poi, per l'elemento figlio, imposta la proprietà position a absolute e top a 50%:

<div class="container">
  <div class="child"></div>
</div>
.container {
  ...
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Centra verticalmente */
  position: absolute;
  top: 50%;
}
box-centered-vertically-1

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

Per centrare davvero l'elemento figlio, imposta la proprietà margin-top a -(half the child element's height):

.container {
  ...
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Centra verticalmente */
  position: absolute;
  top: 50%;
  margin-top: -25px; /* metà dell'altezza di questo elemento */
}
box-centered-vertically-final

Come centrare Verticalmene un Div con Transform e Translate

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

Questo metodo è molto simile al metodo dei margini negativi visto sopra. Imposta la proprietà position dell'elemento genitore a relative.

Nell'elemento figlio, imposta la proprietà position a absolute e imposta top a 50%. Adesso, invece di unsare un margine negativo per centrare davvero l'elemento figlio, usa semplicemente transform: translate(0, -50%):

<div class="container">
  <div class="child"></div>
</div>
.container {
  ...
  position: relative;
}

.child {
  ... 
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
box-centered-vertically-final-1

Nota che translate(0, -50%) è un'abbreviazione per translateX(0) and translateY(-50%). Potresti anche scrivere transform: translateY(-50%) per centrare l'elemento figlio verticalmente.

Come Centrare Verticalmente un Div con Flexbox

Come nella centratura orizzontale, Flexbox rende molto facile centrare gli oggetti verticalmente.

Per centrare un elemento verticalmente, applica display: flex e align-items: center all'elemento genitore:

<div class="container">
  <div class="child"></div>
</div>
.container {
  ...
  display: flex;
  align-items: center;
}
box-centered-vertically-final-2

Come Centrare Verticalmente e Orizzontalmente allo Stesso Tempo

Come Centrare Verticalmente e Orizzontalmente un Div in CSS con il Posizionamento Assoluto e i Margini Negativi

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

Imposta la proprietà position dell'elemento genitore a relative.

Poi imposta le proprietà position dell'elemento figlio a absolute, top a 50%, e left e 50%. Questo centra semplicemente l'angolo in alto a sinistra dell'elemento figlio verticalmente e orizzontalmente.

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

<div class="container">
  <div class="child"></div>
</div>
.container {
  ...
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Centra verticalmente e orizzontalmente */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px; /* dai un margine top e left negativi per centrare davvero l'elemento */
}
box-centered-vertically-and-horizontally

Come Centrare Verticalmente e orizzontalmente un Div con Transform e Translate

Utilizza questo metodo per centrare verticalmente e orizzontalmente un elemento di cui non conosci le dimensioni esatte e non puoi usare Flexbox.

Per prima cosa, imposta la proprietà position dell'elemento genitore a relative.

Dopodiché, imposta la proprietà position dell'elemento figlio a absolute, top a 50%, e left a 50%.

Infine, usa transform: translate(-50%, -50%) per centrare l'elemento figlio:

<div class="container">
  <div class="child"></div>
</div>
.container {
  ...
  position: relative;
}

.child {
  ... 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
box-centered-vertically-and-horizontally-1

Come Centrare Verticalmente e Orizzontalmente un Div con Flexbox

Flexbox è il modo più semplice per centrare un elemento sia verticalmente che orizzontalmente.

Questo è semplicemente solo una combinazione dei due metodi Flexbox precedenti. Quindi applica justify-content: center e align-items: center per centrare l'elemento/i figli/o orizzontamente e verticalmente:

<div class="container">
  <div class="child"></div>
</div>
.container {
  ...
  display: flex;
  justify-content: center;
  align-items: center;
}
box-centered-vertically-and-horizontally-2

Questo è tutto ciò che ti serve sapere per centrare al meglio. Ora va' e centra tutti gli oggetti.