Come centrare un DIV con CSS e jQuery

Nella costruzione di un layout grafico vi sara’ capitato mille volte di centrare un DIV sia orizzontalmente che verticalmente. Oggi con questo breve tutorial voglio mostrarvi il mio metodo preferito, che usa i CSS e jQuery.

Partiamo subito.

CENTRARE ORIZZONTALMENTE CON CSS

Questo e’ molto semplice:

.className{
	margin:0 auto;
	width:200px;
	height:200px;
}

Per centrare un DIV orizzontalmente, basta dargli una larghezza (width) e un valore auto sia per margin-left che per margin-right. Questo metodo funziona per elementi blocco (div, p, h1, etc). Per applicarlo a elementi in linea bisogna aggiungere la regola display:block.

CENTRARE UN DIV SIA VERTICALMENTE CHE ORIZZONTALMENTE CON CSS

Questo metodo e’ un po’ piu’ complesso. Bisogna innanzi tutto conoscere le dimensioni del DIV.

.className{
	width:300px;
	height:200px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-100px 0 0 -150px;
}

Posizioniamo il DIV in posizione assoluta e specifichiamo la sua posizone in relazione alla finestra del browser. Gli diamo un 50% sia da sinistra che dal Top in maniera tale che l’angolo superiore sinistro del DIV sia al centro della pagina. Adesso non rimane che spostare il DIV a sinistra per meta’ della sua larghezza e verso l’alto per meta’ della sua altezza. Ecco il nostro DIV e’ centrato sia orizzontalmente che verticalmente.

CENTRARE UN DIV ORIZZONTALMENTE E VERTICALMENTE CON JQUERY

Questo metodo funziona solo con DIV a dimensioni fisse.

$(window).resize(function(){
$('.className').css({
position:'absolute', left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2
});
});

// To initially run the function:

$(window).resize();

La funzione $(windows) introduce un ridimensionamento che viene richiamato ogni volta che viene richiesto un resize da parte dell’utente.

Questo metodo e’ semplice da utilizzare perche’ non dobbiamo sapere le dimensioni del nostro DIV.

Ecco qui abbiamo finito. In meno di cinque minuti abbiamo imparato i metodi piu’ semplici e veloci per centrare un DIV orizzontalmente e verticalmente. Utile?

Alla prossima!