Centrar div horizontal y verticalmente

Una tarea que antes mediante tablas usando el width="100%" y height="100%" nos sacaba de muchos apuros para centrar una web horizontalmente y verticalmente.

En nuestra hoja de estilo css creamos el siguiente div:

  1. #caja {
  2. position: absolute;
  3. left: 50%;
  4. top: 50%;
  5. width: 400px;
  6. height: 300px;
  7. margin-top: -150px;
  8. margin-left: -200px;
  9. overflow:hidden;
  10. border: 1px solid #000;
  11. }

Para cambiar el tamaño de la caja y respetar todos los márgenes, siempre hay que restar la mitad del tamaño en px de width y height en el margin-top y margin-left.

Noticias

Pronto os mantendremos informados de nuevas noticias de diseño gráfico, páginas web, multimedia, etc..

Últimos tutoriales

Categorías

Enlaces web

© León Púrpura 2008
Zamora | Salamanca | León

Profesionales de diseño web en León
Enlaces | Colabora con nosotros | Solicita presupuesto