Allineare un div a centro pagina

L'obiettivo di questo tutorial è di centrare un box orizzontalmente e verticalmente, rispetto all'intera pagina.

Molti webdesigner, o almeno i più esperti, nella costruzione di una pagina web, utilizzano un div chiamato container che racchiude in sé ogni contenuto.
Il "container" è necessario per effettuare un corretto posizionamento table-less dell'intera struttura della pagina. Può essere utile per definire una larghezza fissa o dinamica, per aggiungere uno sfondo, per definire un'altezza predefinita utilizzando le scrollbar, oppure per allineare il contenuto sul browser, orizzontalmente o verticalmente.
Prenderemo in considerazione quest'ultima ipotesi, l'allineamento, sia verticale che orizzontale, cercando di ottenere come risultato un sito a centro pagina.
Foglio di stile

body, html {
   height: 100%;
   margin: 0;
} 
#container {
   width: 350px;
   height: 200px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -100px 0 0 -175px;
}

Codice HTML

<body>
   <div id="container">
--- qui deve essere inserito il contenuto del sito web ---
   </div>
</body>

Note

tags div centrato, centrare div, box centrati, css, html, table-less

Dettagli pubblicazione

Categoria: CSS

Pubblicato da: loryzz in data: 06.01.2008 15:10:59

Ultima modifica di: loryzz in data: 21.01.2009 11:44:00

Statistiche

Questo articolo è stato visualizzato 15.018 volte.

Segnala presso

Votazioni

Currently 66.6; ?>/ TOTALSTARS
1
2
3
4
5

Commenti

Gli utenti del sito hanno rilasciato 0 commenti, di cui 0 in attesa di approvazione.

Lascia un commento

Tutti i commenti devono essere approvati da un amministratore prima di essere visualizzati al pubblico. Si tratta di una misura preventiva contro spam e pubblicità e non è necessario reinviare il commento.
Si prega di scrivere commenti in tema. Spam e messaggi promozionali non vengono approvati.