Mattepuffo.com
Posizionare un DIV al centro assoluto della pagina
Dettagli- Dettagli
- Categoria principale: Programmazione & Co.
- Ultima modifica il Martedì, 25 Settembre 2012 11:41
- Pubblicato Mercoledì, 29 Agosto 2012 14:53
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="/site/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!
