Centrare un DIV verticalmente con i CSS


Qualsiasi Web Designer si è confrontato almeno una volta con il problema della posizione verticale di un div o qualsiasi altro elemento.
Per centrare in verticale un elemento si possono trovare in rete diversi suggerimenti, più o meno efficaci, ma difficilmente adattabili a tutte le nostre esigenze.
In questo articolo voglio mostrare un ottimo metodo di centratura verticale, basato sulla proprietà “position” dei CSS.

Io non sono il pioniere di questo metodo, e può anche essere una tecnica comune, tuttavia, la maggior parte degli articoli sull’argomento non lo menzionano mai ed io non l’avevo mai visto fino a quando non ho scavato attraverso la sezione commenti di un articolo particolare.

Sappiamo che per centrare un DIV orizzontalmente all’interno del suo contenitore, basta impostare una larghezza e la proprietà “margin” su “0 auto”, ma questo metodo si rifiuta di lavorare anche per la posizione verticale.

/*centrare in orizzontale un DIV*/
div {
width: 100px;
margin: 0 auto;
}

Per centrare un DIV verticalmente, oltre a fissare un’altezza e la proprietà “margin” su “auto”, dobbiamo lavorare anche sulla proprietà “position” impostandola su “absolute” ed impostando tutte e quattro le coordinate su “0”.

div {
position:absolute;
height:50%;
margin:auto;
top:0; left:0; bottom:0; right:0;
}

Praticamente “position: absolute; porta il DIV fuori dal flusso di contenuto, mentre l’impostazione “top: 0; left: 0; bottom: 0; right: 0;” dà al browser una nuova casella di delimitazione per il DIV.
A questo punto il DIV riempirà tutto lo spazio disponibile nel suo contenitore, il quale deve avere “position: relative;”.
Con questo metodo possiamo divertirci a creare soluzioni per le varie problematiche che si presentano più di frequente.

Centrare in verticale un DIV ad altezza fissa

Dato un contenitore possiamo creare un div di altezza precisa e centrarlo verticalmente utilizzando il metodo sopra descritto.

Codice HTML

<div class="content">
  <div id="div2" class="vCenter">
   div centrato in orizzontale e verticale
  </div>
</div>

codice CSS

/*CONTENITORE*/
  .content {
   position:relative;
   width:200px;
   height:200px;
   background-color:#999;
  }
  /*CENTRO IN VERTICALE*/
  .vCenter {
   position:absolute;
   width: 100px;
height:50%;
padding:10px;
   background-color:#ccc;
   text-align:center;
   margin:auto;
   top:0; left:0; bottom:0; right:0;
  }

Centrare in verticale un DIV ad altezza variabile

In questo caso specifico dobbiamo chiedere aiuto ad un po’ di JavaScript. In questo esempio utilizzeremo Jquery.
In questo esempio le regole CSS per il contenitore sono le stesse dell’esempio precedente.

Importiamo Jquery nell’HEAD della nostra pagina web

<script src="jquery.js"></script>

Codice HTML

<div class="content">
  <div id="div3" class="hCenter">
   div di misura variabile centrato in orizzontale e verticale
  </div>
</div>

Codice CSS

/*CENTRO IN ORIZZONATEL*/
  .hCenter {
   width: 100px;
   margin: 0 auto;
   padding:10px;
   background-color:#ccc;
   text-align:center;
  }
  /*CENTRO IN VERTICALE*/
  .vCenter {
   position:absolute;
   margin:auto;
   top:0; left:0; bottom:0; right:0;
  }

Script Jquery

A caricamento del DOM avvenuto facciamo in modo che uno script Jquery applichi gli effetti voluti

	<script>
  $(function () {
   var h = $('#div3').height();
   $('#div3').height(h);
   $('#div3').addClass("vCenter");
  });
</script>

Il metodo di centratura verticale su cui ci stiamo basando, necessita di un’altezza dichiarata per poter funzionare, quindi in questo esempio, il nostro script Jquery non fa altro che:
Riga 1: registra l’altezza del nostro DIV in una variabile catturandola dal DOM.
Riga 2: assegna l’altezza al nostro DIV in modo che compaia tra i suoi stili in linea.
Riga 3: Applica la classe di centratura verticale al DIV in modo che compia il suo lavoro con un’altezza dichiarata.

Non abbiamo fatto altro che prendere in giro il nostro browser.

Centrare in verticale un’immagine dentro un DIV contenitore

Infine non poteva mancare un esempio con una immagine, dove le regole rimangono le stesse descritte negli esempi precedenti, sottolineando che in una immagine non abbiamo necessità di utilizzare JavaScript per catturarne l’altezza basta impostare la proprietà “height: auto;”.

Codice HTML

<div class="content">
  <img src="IMG_0007.jpg" class="centerImage" />
</div>

Codice CSS

/*CENTRO IN ORIZZANTALE E VERTICALE UN'IMMAGINE*/
  .centerImage {
   position:absolute;
   width:90%; height:auto;
   margin:auto;
   top:0; left:0; bottom:0; right:0;
  }

conclusioni

Spero che questo articolo vi sia utile, per le vostre imprese future, un esempio completo di quanto descritto lo potete scaricare da qui.



Articoli Correlati

Web Design spunti di App Design Form in Jquery ed Asp.Net Centrare un DIV verticalmente con i CSS Web Designers e Web Developers

Commenti

Lascia un commento

Il tuo indirizzo e-amil non sarà pubblicato.

Salva commento Anteprima