modo semplice per centrare div orizzontalmente e verticalmente

[uffissimo]

allora so che ci sono milioni di discussioni che portano un titolo simile, ma questa è diversa...
ho letto un sacco di discussioni su questo argomento, ma nessuna soluzione è completa, ne ho pensata una io e funziona, almeno così pare... ma è stupida, e non mi spiego come mai nessuno ci abbia pensato prima, per cui ho pensato che potrebbe avere qualche intoppo di cui un inesperto come me non si accorge.

la soluzione è questa:

1. creo una tabella annidandovi il mio div da centrare:

<table width="100%" height="100%" ><tr><td>      
   <div class="centro">      
   </div>     
</td></tr></table>

la tabella è larga ed alta 100%,

2. do l'altezza al mio body e all'html

html, body { 	
    height:100%; 
    margin:0; 
}

3. centro orizzontalmente il mio div

.centro { 	
     width:800px;
     margin-left:auto;
     margin-right:auto; 
}

non mi preoccupo affatto di centrarlo verticalmente in quanto lo farà da solo, indipendentemente dall'altezza del mio div, perchè è all'interno di una cella di una tabella, che di default mi centra verticalmente i contenuti.

la domanda che mi sorge è... andando avanti nello sviluppo del mio sito, posso incontrare problemi relativi a questa tecnica?

[goikiu]

ma lo centra bene su quali browser? o.0

[uffissimo]

beh io per ora l'ho testato su firefox ed IE7

provate... io voglio proprio sapere cose del genere... se ci sono "controindicazioni" ;P

[graffithouse]

per centrare correttamente il div, per il momento ho trovato solo questa strada.

css

div{ 
height:500px;
width:800px;
position:absolute;
top:50%;
left:50%;
margin-top:-400px;
margin-left:-250px;
}



htlm
<div></div>

[uffissimo]

graffithouse, ma questa posizione è limitata all'altezza fissa del div? e se si dovesse adatare l'altezza in base ai contenuti???

la mia soluzione funziona, ma continuando a lavorarci mi sono accorto di alcuni inconvenienti, facilmente risolvibili lavorando con position:absolute, anche se è una cosa che non amo fare.

infatti la soluzione è perfetta se tutto il resto del sito lo si sviluppa all'interno del div centrato, non ho riscontrato alcun problema, ma se si introduce qualche altro elemento si possono avere problemi, ad esempio ho inserito un logo fuori dal div centrato, ma per farlo l'ho dovuto impostare in position:absolute.

[graffithouse]

l'unico modo che conosco personalmente è questo...

[uffissimo]

ok grazie.