Centrare un box -orizzontalmente e verticalmente - in una pagina web 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.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati