Programmazione Web » Css » Posizionare un div al centro dello schermo
Posizionare un div al centro dello schermo
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 1218 volte
Il posizionamento di un div al centro dello schermo non causa problemi tecnici al sito, ma ne fa perdere molto di estetica!
Poichè sappiamo benissimo che anche l'occhio vuole la sua parte cerchiamo di capire come posizionare un div nel centro della pagina, sia orizzontalmente (e questo lo sappiamo fare tutti), sia verticalmente!
La cosa più importante che andremo a realizzare è che il box che creeremo sarà posizionato al centro dello schermo, indipendentemente dalla risoluzione usata!
Quindi sia l'utente che naviga con lo schermo impostato su 800x600 che quello che naviga a 1024x768 ecc... riusciranno a vedere i contenuti al centro dello schermo!
Per fare questo però, occorre sapere a priori quali sono le dimensioni del box!
Innanzitutto cominciamo col creare un livello contenitore (che sarà quello che andremo a centrare) chiamandolo "container".
<div id="container">
All'interno di questo div e' possibile annidare altri div, creare tabelle, inserire immagini e quant'altro.
</div>
Successivamente passiamo all'inserimento tra gli <head> del codice Css che ci permetterà il posizionamento del div:
<style type="text/css">
body {
background-color: #FFCC66;
}
div#container {
position:absolute;
top:50%;
left:50%;
width:550px;
height:400px;
margin-left:-275px;
margin-top: -200px;
color:#000;
font-weight:bold;
padding:0;
background-color:#fff;
}
</style>
Come potete ben osservare, le linee più interessanti di questo codice sono state scritte in grassetto.
Sostanzialmente possiamo dire che il livello chiamato "container" largo 550px e alto 400px è stato posizionato in maniera assoluta staccandosi del 50% sia dall'alto che da sinistra.
E' fondamentale, ai fini dell'effetto desiderato, che la proprietà margin-left abbia come valore il negativo della metà della proprietà width (550; -275) e che la proprietà margin-top abbia come valore il negativo della metà della proprietà height (400; -200).
Aggiungi questo tutorial ai preferiti
