Centrare un div al centro della pagina con JQuery/JavaScript

Oggi vi mostrerò come allineare perfettamente un box(div) al centro di una pagina web con l’ausilio di Jquery, una delle librerie più usate per programmare in javascript.

La funzione che ci permette di fare ciò è la seguente :

<script type="text/javascript">
function centerDiv(div){
  	var DIVwidth = $(div).width();	
	var DIVheight = $(div).height();
	var SCREENwidth = $(document).width();
	var SCREENheight = $(window).height();	
	var SCREENscrolltop = $(window).scrollTop();
    $(div).hide();
	$(div).css({"position":"absolute","left":(SCREENwidth-DIVwidth)/2+"px","top":(SCREENheight-DIVheight)/2+SCREENscrolltop+"px"});
	$(div).show();
 
}
var div = "#boxCenter";
$(document).ready(function(){
	centerDiv(div);
});
$(window).scroll(function(){
	centerDiv(div);
});
$(window).resize(function(){
	centerDiv(div);
});
</script>

Lo script al primo accesso calcola le coordinate e le imposta al div selezionato . Se l’utente modifica le dimensioni della finestra vengono calcolate delle nuove coordinate e aggiornate.

Proviamo a commentare il cuore del programmino :

	$(div).css({"position":"absolute","left":(SCREENwidth-DIVwidth)/2+"px","top":(SCREENheight-DIVheight)/2+SCREENscrolltop+"px"});

$().css è una funzione JQuery usata per modificare lo stile ( css ) di un elemento html. Ha la seguente sintassi :

$("selettore").css({"proprietà":"valore","proprietà2":"valore",ecec});

Le coordinate X del div viene calcolata grazie a questa espressione :

(SCREENwidth-DIVwidth)/2

Sottraendo la larghezza del DIV alla larghezza del documento otteniamo i due margini , quello sinistro e destro. Per avere un margine occorre quindi dividere tutto per due .

Stesso procedimento per la cordinata Y del box , cambia solo un piccolo particolare perché bisogna sommare lo scroll verticale della pagina :

(SCREENheight-DIVheight)/2+SCREENscrolltop

Vedi esempio – Scarica