miércoles, 1 de julio de 2009

Centrado Vertical con CSS

Hola, hace un tiempo luche bastante para centrar un div verticalmente y que se adecue al tamaño de la ventana del navegador, finalmente lo logre, les paso mi solución.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>Centrado Vertical</title>
  5. <meta name="author" content="Gabriel">
  6. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  7. <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
  8. <meta http-equiv="content-style-type" content="text/css">
  9. <meta http-equiv="expires" content="0">
  10. <style type="text/css" media="screen"><!--
  11. body{
  12. margin: 0px;
  13. overflow-y:hidden;overflow-x:hidden; esto es para que no se muestren las barras de desplazamiento si el bloque centrado es mayor que la ventana
  14. }
  15. #contenido{
  16. background-color: #7c6e63;
  17. vertical-align: middle;
  18. margin-top: -248px; la mitad del alto del bloque pero con signo negativo
  19. margin-left: -330px; la mitad del ancho del bloque pero con signo negativo
  20. position: absolute;
  21. top: 50%;
  22. left: 50%;
  23. height: 496px; el alto del bloque
  24. width: 660px; el ancho del bloque
  25. }
  26. }
  27. -->
  28. </style>
  29. </head>
  30. <body>
  31. <div id="contenido" >
  32. Este es mi bloque centrado vertical
  33. </div>
  34. </body>
  35. </html>
Si quieren ver un ejemplo de como funciona, lo use en la página principal del sitio de Nayik

Bueno, eso es todo, los veo en la próxima entrada.
Gabriel