Posizionare un DIV al centro assoluto della pagina

Mattepuffo's logo
Posizionare un DIV al centro assoluto della pagina

Posizionare un DIV al centro assoluto della pagina

Questa operazione a rigor di logica è facile, da applicare non lo è sempre e spesso ci si impicca.
Vediamo se riusciamo a spiegarlo in maniera facile
Partiamo da una pagina HTML di base:


<html>
 <head>
  <title>Centro Assoluto del DIV</title>
  <link media="screen" rel="stylesheet" href="style.css" />
 </head>
 <body>
  <div id="top"></div>
  <div id="centroassoluto">
   IL TUO CONTENUTO
  </div>
 </body>
</html>


Il div centroassoluto è quello da posizionare a centro pagina.


A questo punto non ci rimane che guardare il file CSS:


html, body{
 height: 100%;
}

body {
 text-align: center;   /* hack del centraento orizzontale per IE */
 padding: 0;         
 margin: 0;          
 width: 100%;
 height: 100%;
}                        

#top {  
 margin-bottom: -190px; /* metà dell'altezza di #centroassoluto */
 background: transparent;
 width: 1px;          
 height: 50%;          
 float: left;          
}

#centroassoluto {
 position: relative;
 text-align: left;     /* hack per IE */
 height: 380px;     
 width: 500px;          
 background: #000000;
 margin: 0 auto;
 clear: left;
}


E questo è quanto!
Fate un pò di prove!


Condividi

Commentami!