05 junio 2007

CSS: centrar un div con tamaño absoluto

Cuando trabajamos con tamaños absolutos (position: absolute) no es sencillo centar un div en la página. Esta es una opción para un div de 300x200 pixels:

div {
position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 200px;
margin-top: -100px; /* mitad de la altura */
margin-left: -150px; /* mitad del ancho */
overflow: auto;
border: 1px solid red;
}

Información detallada:
http://www.programacionweb.net/articulos/articulo/?num=461

Para el caso de querer centrar un div no absoluto podríamos hacer lo siguiente:
  1. Crear un div que ocupe el 100%
  2. Ponerle tex-align:center;
  3. Dentro de ese div insertar otro del tamaño que sea
  4. Poner a este segundo div margin-left:auto; margin-right:auto;