Si son como yo, de los que evolucionamos forzosamente del típico y hoy obsoleto “table”, para encontrarnos con los mágicos DIVs, y CSS probablemente al principio haya sido un dolor de… todo un tema.

Primero porque las table’s son muy secuenciales y ordenadas, y los div con css no necesariamentey segundo porque entender de positions, display, padding, z-index, etc. cuando en las tablas no era necesario se complica un poco al principio.

En este ejemplo vamos a ver como centrar horizontalmente un DIV en el navegador del usuario, es bastante simple y netamente CSS.

Como requisito previo, dentro del BODY debemos crear un DIV con un ID único:

<div id="CenterDiv">
Quiero centrar este DIV
</div>

Siguiente, dentro de las etiquetas HEAD:

<style>
#CenterDiv{
position:absolute; // o fixed
width:500px;
left:50%;
margin-left:-250px;
}
</style>
Div centrado horizontal y verticalmente.

No era difícil, no?
cerrar


Paso a explicarlo, clic para ver un ejemplo:

width: El ancho del DIV a centrar.
left: Siempre 50%.
margin-left: Siempre – (menos) la mitad del ancho del DIV.
Si quisiéramos centrar el DIV verticalmente añadimos:

height:300px;
top:50%;
margin-top:-150px;

De la misma forma, height: alto, top: siempre 50%, margin-top: siempre – (menos) la mitad del alto.
Ejemplo!

Se me dió por empezar con CSS desde este post, en breve empezaré por el principio, JA!
Espero que les sirva.

Nico :D