Centrare elementi verticalmente e orizzontalmente in css

Di seguito vedremo il modo di potere centrare:

• orizzontalmente un elemento a larghezza fissa
• orizzontalmente un elemento a larghezza non conosciuta
• verticalmente un elemento ad altezza fissa
• verticalmente un elemento ad altezza non conosciuta
• orizzontalmente e verticalmente un elemento a misure fisse
• orizzontalmente e verticalmente un elemento a misure non conosciute
• orizzontalmente e verticalmente una singola riga di testo

1. Centrare orizzontalmente un elemento a larghezza fissa

Regole Css:

width: 200px; /*la larghezza dell’elemento*/
margin:auto; /*margine destra e sinistra in modo automatico*/

Esempio concreto:

<div style="width:200px;margin:auto;">
<!–contenuto–>
</div>

NB: il margin:auto; non funziona se non è specificato una larghezza
Provato su Windows con: Firefox, Internet Explorer 6 e 7, Safari, Opera

2. Centrare orizzontalmente un elemento a larghezza non conosciuta

Regole Css:

text-align: center; /*proprietà css text-align con il valore centrato*/

Esempio concreto:

<div style="text-align:center;">
<!–contenuto–>
</div>

NB: il text-align; non funziona se è specificato una larghezza
Provato su Windows con: Firefox, Internet Explorer 6 e 7, Safari, Opera

3. Centrare verticalmente un elemento ad altezza fissa

Regole Css:

height:100px; /*l’altezza dell’elemento*/
position:absolute; /*l’elemento è tolto del flusso naturale della pagina e posizionato in modo assoluto*/
top:50%; /*il bordo superiore dell’elemento si troverà al 50% dell’altezza disponibile*/
margin-top:-50px; /*la metà dell’altezza dell’elemento è tolta come margine superiore per centrarlo*/

Esempio concreto:

<div style="height:100px;position:absolute;top:50%;margin-top:-50px;">
<!–contenuto–>
</div>

Provato su Windows con: Firefox, Internet Explorer 6 e 7, Safari, Opera

4. Centrare verticalmente un elemento ad altezza non conosciuta

Regole Css:

#contenitore{
height:300px; /*l’elemento senza altezza fissa deve per forza essere contenuto in un elemento genitore con un altezza fissa*/
display:table; /*l’elemento contenitore viene visualizzato come una tabella*/
}
#contenuto_centrato{
display:table-cell; /*l’elemento è visualizzato come una cella della tabella*/
vertical-align:middle; /*proprietà vertical-align con valore centrato*/
}

Esempio concreto:

<div style="display:table;height:300px;">
<div style="display:table-cell;vertical-align:middle;">
<!–contenuto–>
</div>
</div>

NB: la proprietà vertical-align è validà se applicata ad una cella di tabella (display:table-cell;)
Questo metodo potrebbe essere d’utilità se il contenuto è generato in modo dinamico tipo da un database.
Provato su Windows con: Firefox, Safari, Opera
Non funziona per Internet Explorer 6 e 7 (vedi seguente esenpio…)

Visto che la proprietà display:table;non è supportata da Internet Explorer 6 e 7, la soluzione sopra non funziona su IE.

Un metodo valido per IE 6 e 7 è la seguente, usando un errore d’interpretazione della proprietà css top con un valore negativo in percentuale che dalle specifiche CSS2 non dovrebbe essere accettabile.
Regole Css:

#contenitore{
height:300px; /*l’elemento senza altezza fissa deve per forza essere contenuto in un elemento genitore con un altezza fissa*/
position:relative; /*uso della posizione relativa per potere posizionare in modo assoluto il suo contenuto*/
}
#sub_contenitore{
position:absolute; /*un sub elemento posizionato in modo assoluto in rapporto al div contenitore*/
top:50%; /*il bordo superiore dell’elemento si troverà al 50% dell’altezza disponibile*/
}
#contenuto_centrato{
position:relative; /*l’elemento da centrare posizionato in modo relativo in rapporto al div sub_contenitore*/
top:-50%; /*il bordo superiore dell’elemento si alza del 50% dell’altezza*/
}

Esempio concreto:

<div style="height:300px;position:relative;">
<div style="position:absolute;top:50%;">
<div style="position:relative;top:-50%;">
<!–contenuto–>
</div>
</div>

NB: ho personalmente aggiunto bordi colorati per capire meglio l’esempio.
Provato su Windows con: IE6 e IE7. Non valida per Firefox, Safari, Opera

5. Centrare orizzontalmente e verticalmente un elemento a misure fisse

Per centrare un elemento a misure fisse verticalmente e orizzontalmente, riusiamo stesso metodo del punto 3 applicando stessa procedura sia per l’altezza che la larghezza.

Regole Css:

width: 200px; /*la larghezza dell’elemento*/
height: 100px; /*l’altezza dell’elemento*/
position: absolute; /*posizione assoluta per potere riposizionare l’elemento*/
left: 50%; /*il bordo sinistra dell’elemento si troverà al 50% della larghezza disponibile*/
top: 50%; /*il bordo superiore dell’elemento si troverà al 50% dell’altezza disponibile*/
margin-left: -100px; /*la metà della larghezza dell’elemento è tolta come margine superiore per centrarlo*/
margin-top: -50px; /*la metà dell’altezza dell’elemento è tolta come margine superiore per centrarlo*/

Esempio concreto:

<div style="width:200px;height:100px;position:absolute;left:50%;top:50%;
margin-left:-100px;margin-top:-50px;">
<!–contenuto–>
</div>

NB: Questo metodo potrebbe essere utile per centrare orizzontalmente e verticalmente un filmato flash dentro una pagine html.
Provato su Windows con: Firefox, Internet Explorer 6 e 7, Safari, Opera

6. Centrare orizzontalmente e verticalmente un elemento a misure non conosciute

Stesso metodo spiegato al punto 4, aggiungendo al div contenitore il text-align:center; come spiegato al punto 2

7. Centrare orizzontalmente e verticalmente una singola riga di testo

Questo ultimo esempio è per centrare verticalmente e orizzontalmente una singola riga di testo con la proprietà line-height dentro un contenitore a misure fisse.

Regole Css applicate al contenitore:

width: 400px; /*la larghezza del contenitore*/
height: 200px; /*l’altezza del contenitore*/
text-align:center; /*la proprietà text-align con il valore centrato*/
line-height: 200px; /*la proprietà line-height con un valore pare a l’altezza*/

Esempio concreto:

<div style="width:400px;height:200px;text-align:center;line-height:200px;">
Centrare una singola riga di testo
</div>

Questo metodo può essere utile anche per centrare il testo dentro elementi <a> (link) con l’aggiunto del display:block; per potere specificare una larghezza e altezza.

Esempio concreto:

<div style="display:block;width:400px;height:200px;text-align:center;line-height:200px;">
Centrare una singola riga di testo dentro un link
</div>

Centrare una singola riga di testo dentro un link

NB: Provato su Windows con: Firefox, Internet Explorer 6 e 7, Safari, Opera
Per maggiore informazione sulla differenza tra elementi block e inline leggere
questo articolo.

This article in english >>

Condividi questo articolo su

allineamento centrato, centrare filmato flash, css allineamento orizzontale, css allineamento verticale, css centrare, css centrare verticale, css centrato orizzontale

23 commenti

Rimani aggiornato con il RSS Feed