A volte ci capita di voler centrare un div più piccolo all’interno di un div più grande. Per fare ciò utilizzeremo il posizionamento assoluto.

Ecco il codice:

See the Pen Come centrare un div all’interno di un altro div by Alberto Firenzuola (@AlbertoFirenzuola) on CodePen.0

Come si può vedere dall’esempio, per avere un elemento centrato verticalmente, dobbiamo fare la differenza tra l’altezza del div genitore (#box-genitore) con l’altezza del div figlio (#box-figlio), e successivamente dividere per due il risultato.

In questo caso:
400 px – 200 px = 200 pixel (400 px è l’altezza del #box-genitore, 200 px è l’altezza del #box-figlio).
200 px / 2 = 100 px (Il risultato della differenza va diviso per due, quello che otterremo sarà il “top” del #box-figlio).

Di conseguenza 100 pixel è la distanza dell’ angolo superiore sinistro del contenuto dal lato superiore del contenitore (top:100px;).
Questi calcoli posso essere applicati anche per quando riguarda la larghezza e la distanza dal lato sinistro.

Per vedere il risultato finale e suggerimenti più dettagliati vi invito a guardare il video tutorial.