Posizionare un box al centro della pagina con i posizionamenti assoluti

La posizione che assumerà il nostro elemento, verrà data dal posizionamento assoluto dato allo stesso. Poniamo il caso che volessimo posizionare un box con le seguenti caratteristiche:

div#box 
{
width:350px; 
height:200px; 
position:absolute;
top:50%;left:50%;  
margin:-100px 0 0 -175px; 
background:#e6e6e6;
border:1px solid #000;
}

Come possiamo vedere dal codice, abbiamo assegnato una dimensione in larghezza (width) pari a 350px; altezza (height) pari a 200px. Siccome la proprietà position:absolute necessita anche di quanto deve essere distante l'elemento dai lati, abbiamo assegnato una dimensione in perecentuale pari a 50% sia per il top che per left. Ma questo non basta per poterci dare il box centrato. Dobbiamo ricorrere alla proprietà margin: infatti dobbiamo "traslare" la dimensione dell'altezza e della larghezza di una dimensione pari alla metà delle dimensioni assegnate.

Se si nota, infatti, il codice CSS riportato, ho scritto:

margin:-100px 0 0 -175px; 

Vale a dire che: se l'altezza è di 200px, il margine deve essere negativo e pari alla metà della dimensione del box. Stessa cosa dicasi per la parte sinistra: se la larghezza è di 350px, il margine deve essere negativo e pari a 175px.

A tal proposito una pagina di esempio mostra il box centrato nella pagina.