Prima dell’avvento del web responsive (o reattivo che dir si voglia), per centrare un box orizzontalmente e verticalmente nella viewport era innanzitutto necessario definirne le dimensioni (larghezza ed altezza), indi posizionarlo in modo assoluto come segue:

#box { width:600px; height:400px; position:absolute; top:50%; left:50%; margin-top:-200px; margin-left:-300px;}

Dopo avere dunque impostato una posizione top e left pari al 50%, è indispensabile correggerla applicando dei margini negativi superiore e sinistro pari ciascuno a metà della corrispondente dimensione del box.
In questo modo a risultare centrato nella viewport non è il punto superiore sinistro del box bensì il suo punto centrale, ottenendo l’effetto desiderato.

Per visualizzare un esempio di questa tecnica, clicca qui.

Se non conosciamo a priori larghezza ed altezza del contenitore, possiamo utilizzare la proprietà CSS3 transform con la funzione translate() che, come noto, riposiziona l’elemento spostandolo gli assi orizzontale e verticale.

Ad esempio:

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

dove transform: translate(-50%, -50%) comporta uno spostamento orizzontale (primo valore) ed uno spostamento verticale (secondo valore) [N.B.: quando viene indicato un solo valore, questo è riferito allo spostamento orizzontale].

Per visualizzare un esempio di questa tecnica, clicca qui.

Ovviamente la compatibilità di tale soluzione è limitata ai browser che comprendono le proprietà CSS3 (tutti i dettagli sulla proprietà transform sono disponibili sul sito W3Schools.com in questa pagina: https://www.w3schools.com/cssref/css3_pr_transform.asp) ma si tratta di una condizione che, al momento, è da considerarsi del tutto accettabile.

Per visualizzare un esempio di questa tecnica applicata ad un box con un’immagine, clicca qui.