Centrare un div verticalmente ed orizzontalmente

| 27 giugno 2010 | 2 Comments

Tante volte mi è capitato di pormi questa domanda mentre scrivevo pagine e sapevo che la risposta doveva essere in javascript. Come avrete ben intuito, se siete arrivati qui cercando su google, le risposte valide non sono molte e in italiano men che meno. Via semplice html è impossibile, via php non esiste (logicamente) una variabile passabile con la grandezza del monitor o del client, l’unica via è tramite javascript dove sono presenti alcune interessanti funzioni…

Quello che il codice che scriverò qui sotto farà, non è nient’altro che centrare un div verticalmente ed orizzontalmente ed in caso di resize della finestra lo stesso si autocentrerà nuovamente. Direi che è il risultato che di solito si cerca di avere no? Allora iniziamo!

Cominciamo con il creare due div, il secondo dentro il primo. A quello più esterno assegneremo come id ad esempio il nome “center”, all’altro invece ho messo un semplice bordino nero e, cosa molto importante, la grandezza che avrà il div centrato, in questo caso 362 x 167 pixel.

<div id="center">
	<div style="border:1px solid #000;width:362px;height:167px">Prova</div>
</div>

Eliminiamo il margine di pagina dal div contenitore (il nostro “center”) tramite il css

body {
	margin:0 auto;
}

A questo punto passiamo al cuore della soluzione in javascript. La prima funzione non farà altro che usare le funzioni window.innerWidth/Height o document.documentElement.clientWidth/Height per prendere prendere la grandezza del client e dopo aver sottratto la grandezza impostata prima divide i due dati per 2 e li pone come padding del div esterno, in modo da centrare quello interno. La seconda funziona invece è solo di rimando alla prima nel caso in cui la finestra venga ridimensionata.

<script type="text/javascript">
function centerDiv(){
	if(typeof(window.innerWidth) == 'number') {
		document.getElementById("center").style.paddingLeft = (((window.innerWidth)-362)/2)+"px";
		document.getElementById("center").style.paddingTop = (((window.innerHeight)-167)/2)+"px";
	} else {
		document.getElementById("center").style.paddingLeft = (((document.documentElement.clientWidth)-362)/2)+"px";
		document.getElementById("center").style.paddingTop = (((document.documentElement.clientHeight)-167)/2)+"px";
	}
}

window.onresize = function (){
		centerDiv();
}
</script>

L’ultima cosa da fare è caricare la funzione centerDiv() al caricamento del body della pagina e per farlo utilizzeremo l’onload del body.

<body onload="centerDiv();">

Ed ecco infine il codice completo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div Centrato</title>
<style type="text/css">
<!--
body {
	margin:0 auto;
}
-->
</style>
<script type="text/javascript">
function centerDiv(){
	if(typeof(window.innerWidth) == 'number') {
		document.getElementById("center").style.paddingLeft = (((window.innerWidth)-362)/2)+"px";
		document.getElementById("center").style.paddingTop = (((window.innerHeight)-167)/2)+"px";
	} else {
		document.getElementById("center").style.paddingLeft = (((document.documentElement.clientWidth)-362)/2)+"px";
		document.getElementById("center").style.paddingTop = (((document.documentElement.clientHeight)-167)/2)+"px";
	}
}

window.onresize = function (){
		centerDiv();
}
</script>
</head>

<body onload="centerDiv();">
<div id="center" style="padding-top:100px;">
	<div style="background-color:#900;width:362px;height:167px">Prova</div>
</div>
</body>
</html>
VN:F [1.9.22_1171]
Rating: 6.0/10 (4 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 2 votes)
Centrare un div verticalmente ed orizzontalmente, 6.0 out of 10 based on 4 ratings

Related Images:

Tags: , , , , , , , , , , , , , , , , , , ,

Category: Informatica

About the Author ()

Comments (2)

Trackback URL | Comments RSS Feed

Sites That Link to this Post

  1. Pillole di jQuery – Centrare un div | -=[Il Chiaroscuro]=- | 10 marzo 2012
  1. keis scrive:

    Grazie mille!!! Funziona alla grande… utilissimo!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

Leave a Reply