Tempo fa stavo sviluppando un semplice sito web usando HTML/CSS/JS ed avevo la necessità di centrare un elemento nella pagina. Era un riquadro fatto con un DIV dentro al quale si sarebbe sviluppato l'intero sito.
Ho cercato un pò in giro su internet per non dover scrivere qualcosa che sicuramente era già stato affrontato da altri. Beh, ho trovato decine di soluzioni ma nessuna che facesse al caso mio.
Cercavo una soluzione lineare e pulita. un punto di partenza per il sito quindi non volevo incasinarmi la vita "sporcando" la mia pagina di codice ancora prima di iniziare a programmare!! 
Il web quel giorno era pieno di siti web che proponevano usi fantasiosi per un problema secondo me semplice e non accettavo di dover includere nella mia pagina web script JS o altro.
in quei giorni stavo leggendo un libro sui CSS (un ottimo libro, in fondo a questo articolo vi fornirò i dettagli) e, proprio come succede nei film mi è tornato in mente qualcosa che avevo letto qualche sera prima. Si parlava di margini negativi e margini percentuali. Ho ripreso in mano il libro e, con grandissima soddisfazione da Nerd ho sfornato la soluzione che cercavo.
La vorrei condividere con voi 
La soluzione tratta di centrare un DIV di 500px di altezza per 800px di larghezza ma si può adattare sicuramente ad ogni esigenza! C'è bisogno di un pò di CSS e qualche riga di HTML…
partiamo con il CSS, aggiungete questo alla vostra pagina web:
div#centered_div {
width: 800px;
height: 500px;
position: relative;
top: 50%;
left: 50%;
margin-left: -400px;
margin-top: -250px;
background-color: #000000;
border: 1px solid #FF3;
}
E nel corpo della pagina inserite questo:
<div id="centered_div">
QUI DENTRO SI SVILUPPA IL SITO!!! WOW!!!
</div>
<!–FINE DIV CENTRATO–>
Il foglio di stile dice che il DIV con id=centered_div deve avere le dimensioni di 800×500 pixel ed essere posizionato a partire dal 50% dell'altezza e della larghezza della pagina.
Poiche la posizione indicata dai margini si riferisce all'angolo superiore sinistro del nostro box DIV, questo avrà un vertice esattamente al centro della pagina ma si svilupperà non centrato.
Per riportare il centro del DIV al centro pagina lo dobbiamo rispostare indietro esattamente della metà della sua altezza e della sua larghezza e lo facciamo usando i margini negativi.
Ho messo un colore di sfondo nero ed un bordo scintillande per vederlo meglio.
Potete modificare le dimensioni del DIV a vostro piacimento modificando anche i margini negativi con la metà dei valori delle dimensioni.
BUON DIVERTIMENTO CON IL VOSTRO DIV CENTRATO.
F
Il libro sui CSS si intitola "CSS The Missing Manual" di David Sawyer McFarland edito da O'Reilly e fa parte della serie The missing manual. E' un buon libro per utente medio.
Lo trovate nelle librerie on line, io l'ho comprato da Amazon.com usato pagandolo veramente una miseria, libro + spedizione 23 dollari, al cambio attuale 17 Euro. Cose impensabili in italia.
