Foros del Web » Creando para Internet » CSS »

Centrar verticalmente el contenido de una página

Estas en el tema de Centrar verticalmente el contenido de una página en el foro de CSS en Foros del Web. Tengo intenciones de hacer un sitio con varias páginas con poco contenido, el cual deberá quedar centrado en el navegador sin importar la resoución de ...
  #1 (permalink)  
Antiguo 28/03/2006, 16:56
Avatar de lyoung  
Fecha de Ingreso: noviembre-2005
Ubicación: Montevideo, la gran capit
Mensajes: 139
Antigüedad: 12 años
Puntos: 0
Centrar verticalmente el contenido de una página

Tengo intenciones de hacer un sitio con varias páginas con poco contenido, el cual deberá quedar centrado en el navegador sin importar la resoución de pantalla del visitante.
Desde ya, muchas gracias a cualquier aporte
  #2 (permalink)  
Antiguo 28/03/2006, 22:09
 
Fecha de Ingreso: mayo-2003
Mensajes: 40
Antigüedad: 14 años, 7 meses
Puntos: 1
para centrarlo horizontalmente

Código:
div#container {
margin: 0 auto;
}
Se sobre entiende que todo tu contenido debe estar dentro de un div contenedor en mi ejemplo con el id container eso te debe de servir, de cualquier forma te recomiendo especificar un valor para el width -ancho- de tu div, considerando que la resolución estandar es 1024x768 (aunque hay poca gente aun con 800x600) te recomiendo definir un width de alrededor de 700px


saludos.
__________________
| Smoke citizen
  #3 (permalink)  
Antiguo 29/03/2006, 03:44
Avatar de hunab  
Fecha de Ingreso: febrero-2005
Ubicación: Barcelona
Mensajes: 133
Antigüedad: 12 años, 9 meses
Puntos: 1
para centrar el contenido verticalmente necesitarias un contenedor de medidas absolutas, y el método es bastante intuitivo. Lo posicionas en absoluto respecto a la pantalla, le das un margen hacia arriba del 50% (de esta manera tu contenedor se situaría desde la mitad hacia abajo) y para acabar de centrarlo le das un margen negativo hacia arriba que sea la mitad de lo que mide verticalmente. Así explicado puede parecer lioso pero en la practica es muy facil.

Un saludo!
__________________
Marcio Barrios
marciobarrios.com // artículos sobre estándares y desarrollo web
  #4 (permalink)  
Antiguo 29/03/2006, 14:07
Avatar de lyoung  
Fecha de Ingreso: noviembre-2005
Ubicación: Montevideo, la gran capit
Mensajes: 139
Antigüedad: 12 años
Puntos: 0
Muchas gracias

Ninguna de las respuestas que me han dado me parece tan complicada que no se pueda hacer.
En este momento estoy en el trabajo, pero cuando llegue a casa lo pruebo y les cuento.
Gracias nuevamente
__________________
Todo se ve mejor si le miramos el lado positivo.
  #5 (permalink)  
Antiguo 30/03/2006, 16:39
Avatar de lyoung  
Fecha de Ingreso: noviembre-2005
Ubicación: Montevideo, la gran capit
Mensajes: 139
Antigüedad: 12 años
Puntos: 0
De acuerdo Muchas gracias

En realidad solo probé con la idea de hunab que fue la que me pareción más comprensible y funcionó perfectamente.
__________________
Todo se ve mejor si le miramos el lado positivo.
  #6 (permalink)  
Antiguo 30/03/2006, 16:45
Avatar de lyoung  
Fecha de Ingreso: noviembre-2005
Ubicación: Montevideo, la gran capit
Mensajes: 139
Antigüedad: 12 años
Puntos: 0
De acuerdo Muchas gracias

En realidad solo probé la idea de hunab y funcionó bárbaro.
__________________
Todo se ve mejor si le miramos el lado positivo.
  #7 (permalink)  
Antiguo 31/03/2006, 17:30
Avatar de Wel
Wel
 
Fecha de Ingreso: marzo-2003
Mensajes: 77
Antigüedad: 14 años, 8 meses
Puntos: 0
Para centrar una capa tanto horizontal como verticalmente uso esto:

Código:
<HTML>
<HEAD>
<style>

#centrado {
	position: absolute;
	margin-top:50%; margin-left:50%;
	top:-250px; left:-250px;
	width: 500px; height: 500px;
	border: 1px solid #000;
	text-align: center;
}

</style>
</HEAD>
<BODY>
<div id=centrado>X</div>
</BODY>
</HTML> 
PERO NO ME QUEDA CENTRADO ¿POR QUE?
  #8 (permalink)  
Antiguo 31/03/2006, 18:22
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
Hola a todos, hola Wel.

Lo estás haciendo al revés.

Código HTML:
margin-top:-250px; margin-left:-250px;
top:50%; left:50%;
A mi me gusta trabajar con porcentajes:

Código HTML:
#centrado {
	position: absolute;
	top:30%; left:30%;
	width: 40%; height: 40%;
	border: 1px solid #000;
	text-align: center;   }
Tampoco estaría de más ponerle comillas al id
  #9 (permalink)  
Antiguo 01/04/2006, 03:18
Avatar de Wel
Wel
 
Fecha de Ingreso: marzo-2003
Mensajes: 77
Antigüedad: 14 años, 8 meses
Puntos: 0
MUCHAS GRACIAS

Es que soy nuevo en el CSS, (que no CSI).
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:30.