- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <title>Centrado Vertical</title>
- <meta name="author" content="Gabriel">
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
- <meta http-equiv="content-style-type" content="text/css">
- <meta http-equiv="expires" content="0">
- <style type="text/css" media="screen"><!--
- body{
- margin: 0px;
- 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
- }
- #contenido{
- background-color: #7c6e63;
- vertical-align: middle;
- margin-top: -248px; la mitad del alto del bloque pero con signo negativo
- margin-left: -330px; la mitad del ancho del bloque pero con signo negativo
- position: absolute;
- top: 50%;
- left: 50%;
- height: 496px; el alto del bloque
- width: 660px; el ancho del bloque
- }
- }
- -->
- </style>
- </head>
- <body>
- <div id="contenido" >
- Este es mi bloque centrado vertical
- </div>
- </body>
- </html>
Bueno, eso es todo, los veo en la próxima entrada.
Gabriel