Centrare un div all'interno della pagina è un'operazione che può sembrare semplice, ma risulta spesso problematica soprattutto per quanto riguarda il posizionamento verticale. Tuttavia, esistono vari metodi e possibilità per arrivare allo scopo.

Prima di iniziare definiamo due div, uno all'interno dell'altro, con dimensioni prestabilite e colori diversi.

<div id="parent">
    <div id="child"></div>
</div>

#parent {
  width: 200px;
  height: 200px;
  background-color: #555;
}
#child {
  width: 100px;
  height: 100px;
  background-color: #333;
}

Il primo esempio si basa sull'utilizzo della proprietà css transform. Il principio è semplice: lo spostamento tramite CSS viene effettuato utilizzando il margine superiore sinistro dell'elemento, quindi posizionando quel punto al centro e translandolo poi del -50% orizzontalmente e verticalmente, otterremo due elementi concentrici.

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

Lo stesso risultato è ottenibile utilizzando margin: auto. Anche in questo caso la fisica del CSS farà sì che l'elemento venga posizionato mantenendo egual distanza rispetto ai punti di ancoraggio (top, left, bottom, right).

#parent {
  position: relative;
}
#child {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

L'ultima modalità si basa su Flexbox e sulla capacità dell'elemento padre di imporre il posizionamento ai figli.

#parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Tramite justify-content controlliamo il posizionamento sull'asse verticale, con align-items l'asse orizzontale. È anche possibile dare al figlio la capacità di posizionarsi nello spazio, come mostrato nel seguente snippet.

#parent {
  display: flex;
  justify-content: center;
}

#child {
  align-self: center;
}