[Ovillo] Cosas Basicas: Centrado Vertical

Mie Feb 14 15:25:58 UTC 2007

Hola gente de la lista,

Estoy tratando de hacer algo que por lo visto es muy sencillo, pero la solución que utilizaba parece no funcionar muy bien con IE7, quisiera buscar algo que funcione en todos los navegadores y de preferencia sin hacks.

Estoy tratando de que el contenido de una página quede centrado verticalmente, normalmente haria esto con una tabla principal, le daria ancho y alto de 100% y alineo el contenido en el centro y ya esta, pero quisiera hacer algo sin usar tablas.

Este es mi codigo:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Esto es una prueba de centrado vertical</title>
<style type="text/css">
<!--
* {margin:0; padding:0;}
#contenedor {width:750px; margin:auto; overflow:auto;}
-->
</style>
</head>
<body>
<div id="contenedor">
	<div id="banner">
		<h1>Nombre del sitio</h1>
	</div>
	<div id="navegacion">
		<ul>
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 1</a></li>
		</ul>
	</div>
	<div id="contenido">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer sit amet diam nec dui vulputate porttitor. Maecenas libero felis, auctor ut, accumsan id, ornare in, enim. Aliquam erat volutpat. Curabitur eros. Vestibulum dolor eros, faucibus mollis, tempor eget, consequat ut, libero. Mauris dapibus ante. Maecenas pede. Integer urna. Donec vehicula hendrerit diam. Duis convallis tempus nisi. Curabitur lacinia, purus eget dictum laoreet, erat sapien venenatis enim, sed laoreet sapien massa nec orci. Duis pretium, elit sit amet bibendum lacinia, leo tellus ornare orci, nec luctus urna purus quis enim. Nullam fringilla tellus a arcu iaculis varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer risus tortor, consectetuer at, lobortis a, pharetra a, urna. Sed nonummy venenatis pede. Sed sed tortor. Sed volutpat blandit sem.</p>
	</div>
	<div id="pie">
	<p>Aqui va todo lo legal y cosas similares</p>
	</div>
</div>
</body>
</html>

---

Gracias de antemano!