¿Cómo centrar verticalmente el contenido principal?

codecweb98 · #1 (**permalink**) 02/05/2011, 15:22

Hola!!

El problema que tengo es no saber cómo centrar verticalmente, con respecto a la resolución de cualquier pantalla, el contenido principal de un sitio web (el "main frame") que mide 980 x 550.

Actualmente lo hago con JavaScript, pero ésta solución no me gusta, porque en lo que ocurre el "onload" pasan algunos segundos en que el contenido no está centrado verticalmente.

El sitio, por si lo quieren ver, es: Circus Divas (que es solo para mayores de 16 años, no es pornográfico pero muestra imágenes "extrañas").

Muchas Gracias.

Hugo_Euan · #2 (**permalink**) 02/05/2011, 15:39

Bueno, si tu sabes el tamaño exacto del contenedor lo que puedes hacer es ponerle posiciones absolutas al contenido, por ejemplo

Código HTML:

Ver original<div id="Container">
   <div id="Content">Esto es meramente un ejemplo</div>
</div>

y tu CSS quedaría de la siguiente manera

Código CSS:

Ver original#Container{position:relative; width:980; height:550;}
#Content{position:absolute; left:(la posicion que quieras en X); top:la posicion en Y}

Espero que te ayude, saludos y EXITO !!!!

IsaBelM · #3 (**permalink**) 02/05/2011, 16:07

con este código consigues centrar el contenido tanto horizontal como verticalmente, sin importar la resolución de la pantalla

Cita:

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Page</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}

#contenedor {
position: absolute;
left: 50%;
top: 50%;
margin-right: auto;
margin-left: -490px; /* resta la mitad del ancho */
margin-top: -275px; /* resta la mitad del alto */
width: 980px;
height: 550px;
}

.contenido {
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div id="contenedor">
<div class="contenido"></div>
</div>
</body>
</html>

codecweb98 · #4 (**permalink**) 02/05/2011, 16:08

Hugo:

Yo conozco el tamaño del contenedor, pero no el de la pantalla donde se está viendo (la resolución del monito). Podría ser de 1024x768, 1280x800, 1600x1000, etc.

Y lo que deseo es que quede centrado verticalmente en cualquiera, lo logro con JavaScript obteniendo la resolución del monitor y agregando a una <div> "invisible" el alto necesario para el centrado.

Gracias.

IsaBelM · #5 (**permalink**) 02/05/2011, 16:24

como hemos publicado casi al unisono, creo que no te has percatado de esta solución

codecweb98 · #6 (**permalink**) 03/05/2011, 02:02

Muchas Gracias IsaBelM !!!

Todo funciona correctamente, así como tu indicas.

Ahora solo me queda cambiar el template.