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;

2 comentarios:

Anónimo dijo...

Gracias por la data
estoy empezando a utilizar css y la verdad es que se me esta complicando un poco
pero bue
todo a la larga se aprende dicen
saludos
Camaro.-

Anónimo dijo...

muchas muchasssssssss gracias, busque por hs y esta fue la que resultó!

Romina