Ho un problema credo abbastanza semplice al quale non riesco a trovare risposta.
Vorrei centrare un div in altezza nella pagina mantendendo le misure in percentuale:
Ho cercato di seguire il box model, ma non mi funziona comunque e vorrei capire le ragioni e come dovrei fare.
HTML:
<body>
<div id="esterno">
</div>
</body>
CSS:
html, body
{
height:100%;
border:thin solid #000000;
padding:0;
margin:0;
}
#esterno
{
height:50%;
margin-top:25%;
margin-bottom:25%;
background-color:#CCCCCC
}
Il risultato che ho con questo codice è un bordo preciso attorno alla pagina (c'è un minimo di overflow, ma è dovuto al bordo che mi serve solo ora per capire meglio la posizione dei pezzi), ma il div non è per nulla centrato. Ha il margin-top che è circa il doppio del margin-bottom e non capisco perchè.
Qualcuno sa aiutarmi? Grazie!