Come centrare un div all’interno di un altro div con il posizionamento assolto.

25 gennaio 2017

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.

Articoli Correlati Ti potrebbe interessare anche

Alberto Firenzuola

Come centrare una riga di testo in un div con il css.


23 gennaio 2017

Alberto Firenzuola

Come centrare verticalmente ed orizzontalmente un div all’interno di una pagina con il css.


Crea il tuo sito web e proponi il tuo business