Centrare verticalmente una pagina tramite CSS

28 Dicembre 2010 Css
ATTENZIONE! Il post ha più di 2 anni e le informazioni contenute potrebbero essere obsolete (ad esempio a causa di un aggiornamento di versione rispetto agli elementi descritti o links modificati da siti esterni).

Ecco il codice completo per centrare il contenuto verticalmente all'interno di una pagina web:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <style>
  html,body{
   height:100%;
   margin:0;
   padding:0;
  }
  body{
   min-width:626px;
   min-height:400px;
   text-align: left;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 13px;
   color: #333;
   background-color:#f8efef;
  }
  #boxer{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-200px;/* metà dell'altezza dell'elemento */
   margin-left:-313px;/* metà della larghezza dell'elemento */
   width:626px;
   height:400px;
   /* visualizza scrollbar se il
    * contenuto supera l'altezza */
   overflow:auto;
   /* altre proprietà */
   background-color:#2f9943;
   text-align:center;
  }
 </style>
</head>
<body>
 <div id="boxer">
  Contenuto
 </div>
</body>
</html>

 

 

Commenti