Io non capisco perchè si continua a dubitare del metodo, se si ha un contenitore con misure fisse height e width, non si può sbagliare è una vita che uso quel metodo e mi ha sempre messo i contenitori al centro perfetto
Quando ci sono tutte e due le misure più top 50% e left 50% più la metà delle misure in negativo nel margin, si ottiene un risultato perfetto senza ombra di dubbio su tutti i browser, poi se si sbaglia qualche cosa ecco che il risultato cambia.
Attenzione al padding che cambia i valori.
Non capsco cosa ti serve un display block nel contenitore
--
Scusa ma ti sbagli, a meno che io non stia sbagliando qualcosa.
A me succede che il container, facendo come dici tu, in alto scompare dallo schermo.
Il mio codice è :
<body>
<div id="container">
<div id="header">
<div id="navhead"></div>
</div>
<div id="navigation"></div>
<div id="extra"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body
></html>
E il foglio di css è :
html { margin: 0px; padding: 0px; width: 100%; height: 100%; text-align: center; }
body { margin: 0px; padding: 0px; position: fixed; width: 100%; height: 100%;
text-align: center; background-image: url(../image/sfondo250px.jpg);
background-color: #DDDDDD; /* grigio = sfondo */ }
div#container { margin: -300px 0 0 -512px; width: 1024px; height: 800px;
position: absolute; top: 50%; left: 50%; text-align:left;
background-color: #666666; display: block; }
div#header { margin: 0px auto; width: auto; height: 120px; border: 2px solid #00FF00;
background-color: #006699; text-align: left; display: block; }
div#navhead { position: relative; bottom: 0px; width: 30px; height: 30px;
background-color: #000000; text-align: left; display: block; }
Se notate con margin -300px arrivo al limite con ie8 e netscape (ma dovrei diminuire ancora); con opera vedo pochi pixel (5/6) ad di sopra.
Nella navhead ho un quadrato di prova che vorrei posizionare in basso a destra ma non c'è verso di farlo.
Aiuto !!!!!!!!!!!!!!!!!!!!!!!!!!!!