http://www.allwebfree.it/articolo-css-centrare-box-nella-pagina.php

Al momento esistono svariati browser sulla rete (tutti gratuiti), e tutti dovrebbero rispettare i codici di programmazione delineati dal W3C, l'organo preposto a creare linee guida per la programmazione web.

Il web sta cambiando. Il linguaggio HTML è ormai vecchio, e trova un valido e simile concorrente nell' XHTML. Tale linguaggio prevede un forte utilizzo dei CSS, unito al famigerato BOX MODEL, che in pratica non è altro che un utilizzo dei box DIV al posto delle vecchie TABELLE html per il layout del sito.

Riuscire a centrare un box all'interno di una pagina web vuol dire riuscire a far combaciare tutti i limiti dei browser in circolazione in un'unica soluzione, pratica ed efficente.

Attualmente esistono più tecniche per centrare un box, vediamo quali possiamo utilizzare:

 

Per posizione assoluta intendiamo dire che un box viene centrato in una pagina utilizzando le sue coordinate, fissandole rispetto al foglio (o tag body).
Questa tecnica si può utilizzare solo con i box di misura fissa e conosciuta (Essenziale per determinare le coordinate).
Con questa tecnica si può centrare un box in orizzontale e/o in verticale.

Come reagisce il browser?
Per centrare un box al centro pagina il browser dovrebbe centrare la coordinata del centro box.
In realtà i browser centrano la coordinata dell'angolo in alto a sinistra del box.
Per risolvere questo problema dobbiamo inserire margini negativi all'interno dei css del box (per bilanciare il comportamento dei browser). La misura dei margini è uguale alla metà della larghezza e alla metà dell'altezza del box (con valori negativi).

Esempio box centrato in vericale e orizzontale:

<body>
<div style="border:1px solid black; width:400px; height:400px; position:absolute; top:50%; left:50%; margin:-200px 0 0 -200px;">
Contenuto box
</div>
</body>

Puoi vedere il risultato in questa pagina di esempio.

Esempio box centrato solo in orizzontale:
Per centrare un box solo in orizzontale dobbiamo togliere i riferimenti verticali dal codice dell'esempio precedente, ottenendo il codice sottostante.

<body>
<div style="border:1px solid black; width:400px; height:400px; position:absolute; left:50%; margin:10px 0 0 -200px;">
Contenuto box
</div>
</body>

Puoi vedere il risultato in questa pagina di esempio.

 

 Compromesso fra browser

Il browser Internet Explorer è impostato diversamente dagli altri browser.
Per centrare i box in orizzontale, Internet explorer pretende l'inserimento della proprietà text-align:center; nel contenitore più grosso (che può essere body, oppure un'altro box).
Mentre gli altri browser (firefox, opera, safari e google chrome), pretendono l'inserimento della proprietà margin:0 auto 0 auto; nel box che deve essere centrato.

Per unire questi due concetti di centratura dobbiamo unire entrambe le tecniche, inserendo anche text-align:left; nel box da centrare, per evitare che l'ereditarietà dei Css ne condizioni la posizione del testo.


Esempio di centratura con Internet Explorer
Almeno fino alla versione 7.

<body style="text-align:center;">
<div style="border:10px solid black; width:400px; height:400px; text-align:left;">
Contenuto box
</div>
</body>

Puoi vedere il risultato in questa pagina di esempio.

In questo caso vediamo:

Con Firefox, safari, opera e google chrome:
pagina non centrata in firefox, safari, opera e google chrome
Con Internet Explorer7:
pagina centrata in internet explorer7





Esempio di centratura con Firefox, opera, safari e google chrome:

<body>
<div style="border:10px solid black; width:400px; height:400px; margin:0 auto 0 auto;">
Contenuto box
</div>
</body>

Puoi vedere il risultato in questa pagina di esempio.

In questo caso vediamo:

Con Firefox, safari, opera e google chrome:
pagina centrata in firefox, opera, safari e google chrome
Con Internet Explorer7:
pagina non centrata in internet explorer7





Esempio di centratura per TUTTI i browser

<body style="text-align:center;">
<div style="border:10px solid black; width:400px; height:400px; margin:0 auto 0 auto; text-align:left;">
Contenuto box
</div>
</body>

Puoi vedere il risultato in questa pagina di esempio.

In questo caso vediamo: