A volte ci capita di voler centrare un elemento verticalmente e orizzontalmente rispetto a una pagina html, pur non sapendo le sue dimensioni.

Al giorno d’oggi l’utente potrebbe avere una risoluzione di schermo diversa, in base al dispositivo utilizzato. In questo caso utilizzeremo il posizionamento assoluto e i margini negativi.

Ecco il codice:

See the Pen COME CENTRARE VERTICALMENTE E ORIZZONTALMENTE UN DIV CON I CSS by Alberto Firenzuola (@AlbertoFirenzuola) on CodePen.0

Non conoscendo le dimensioni della finestra del browser (dell’intera pagina html), diamo un posizionamento assoluto con left e top pari al 50% dello spazio che ha a disposizione l’elemento da posizionare centralmente. Dichiareremo, poi, i margini negativi (top e left) pari alla metà della larghezza e dell’ altezza del box.

In questo esempio, avendo una larghezza (width) di 350px, il margin-left dovrà essere pari alla sua metà, esattamente 250px, poi bisognerà porlo negativo. Quindi con un margin-left pari a -250px.

Mentre per quanto riguarda all’altezza (height) di 200px, il margin-top dovrà essere pari alla sua metà, esattamente 100px, poi bisognerà porlo negativo. Quindi con un margin-top pari a -100px.

L’utilizzo dei margini negativi è dovuto al fatto che, utilizzando dei margini positivi, il #container si sarebbe spostato verso destra nella parte bassa del browser.

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