Hai proprio ragione!!!
Per evitare fraintendimenti lascio il testo com'è in modo che il tuo commento fornisca la spiegazione...
Anzi potrei dire "volevo vedere se eravate attenti"!!!
Oggi ti spiego come realizzare un box a dimensioni fisse centrato nella pagina utilizzando solo delle semplici definizioni CSS.
Questo tipo di tecnica è molto diffusa per creare dei box di login o dei box di informazione che rimangano centrati nello schermo in modo indipendente dalla dimensione dello schermo (layout fluido).
Iniziamo con la struttura xHTML...
La seguente porzione di codice è da considerarsi parte di una completa struttura xHTML 1.0 Strict:
...
<body>
<div class="centrato">
Testo contenuto nel box.
</div>
</body>
Come puoi vedere utilizziamo solamente un semplice elemento DIV il cui contenuto può essere totalmente arbitrario... ad esempio un form di login.
Per il nostro DIV abbiamo utilizzato la classe CSS "centrato" che andiamo a definire di seguito. Vorrei farti notare che sarebbe stato possibile utilizzare anche in ID... cambia solamente il tipo di sintassi utilizzata nella seguente porzione CSS.
... Concludiamo con la definizione di stile:
Il foglio di stile CSS è altrettanto semplice:
div.centrato {
display: block;
width: 300px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -100px;
background: #900;
}
Le prime 3 righe definiscono la dimensione del box. Questo è un dato fondamentale affinchè il successivo posizionamento abbia successo.
Le successive 3 righe definiscono il posizionamento assoluto del box. Utilizzando la misura percentuale risuciamo ad ottenere il posizionamento centrato senza conoscere le dimensioni esatte della finestra.
Ti faccio però notare che in questo modo è l'angolo in alto a sinistra del box a risultare centrato. Questo si deve al fatto che i posizionamenti vengono calcolati proprio da questa posizione per qualsiasi elemento della pagina.
Entrando nel vivo di questa tecnica di posizionamento utilizziamo l'attributo margin per "correggere" il posizionamento portando il punto notevole al posizionamento al centro del box.
E' importante notare che utilizziamo dei margini negativi per "arretrare" di metà dimensione sia la larghezza che l'altezza del box.
L'ultima riga serve semplicemente a definire un colore di sfondo per visualizzare meglio il box posizionato.
Visualizza l'esempio completo »
Conclusioni:
Questa è una semplicissima tecnica per ottenere un box centrato basata unicamente su definizioni CSS. Sicuramente è una più che valida alternativa all'utilizzo di tabelle per ottenere effetti di questo tipo.
Il punto debole di questa soluzione è la necessità di conoscere a priori le dimensioni esatte del box da centrare.
Per finire vorrei farti notare che questa soluzione può essere adottata anche per posizionare immagini o altri elementi xHTML.
margin: -100px 0 0 -150px; ???