Foros del Web » Creando para Internet » CSS »

Centrar un div en vertical

Estas en el tema de Centrar un div en vertical en el foro de CSS en Foros del Web. Buenas, tengo un codigo tal que asi para hacer un div centrado horizontalmente: Código: #principal { margin: auto; position:relative; left:0px; top:0px; width:1024px; height:600px; z-index:1; background-color: ...
  #1 (permalink)  
Antiguo 25/02/2011, 11:23
 
Fecha de Ingreso: febrero-2011
Ubicación: Ávila, España
Mensajes: 44
Antigüedad: 6 años, 9 meses
Puntos: 1
Centrar un div en vertical

Buenas, tengo un codigo tal que asi para hacer un div centrado horizontalmente:

Código:
#principal {
	margin: auto;
	position:relative;
	left:0px;
	top:0px;
	width:1024px;
	height:600px;
	z-index:1;
	background-color: #53534b;
}
Y quisiera saber que le tengo que añadir para alinearle tambien verticalmente en el centro de la pantalla.

Saludos y gracias
  #2 (permalink)  
Antiguo 25/02/2011, 11:39
 
Fecha de Ingreso: febrero-2011
Ubicación: Avellaneda, Buenos Aires
Mensajes: 39
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Centrar un div en vertical

Hola. Comentanos un poco para que vas a usar ese div, asi te podemos ayudar mejor.
De cualquier modo, seguramente el siguiente código cumpla con tu requisito:

Código HTML:
Ver original
  1. #principal {
  2.     margin-top:-300px /* la mitad del alto */;
  3.     margin-left:-512px /* la mitad del ancho */;
  4.     position:absolute;
  5.     left:50%;
  6.     top:50%;
  7.     width:1024px;
  8.     height:600px;
  9.     z-index:1;
  10.     background-color: #53534b;
  11. }

Para algo más avanzado seguramente haga falta de Javascript.
Tené en cuenta que el ancho del div es un poco grande, y la resolución mínima ideal es de 1280px (incluso en un monitor de 1024px, el ancho queda corto).

Saludos!
  #3 (permalink)  
Antiguo 25/02/2011, 11:47
 
Fecha de Ingreso: febrero-2011
Ubicación: Ávila, España
Mensajes: 44
Antigüedad: 6 años, 9 meses
Puntos: 1
Respuesta: Centrar un div en vertical

Ahora mismo estoy probando, pero la idea es hacer la "Web" en un div que se centre automaticamente en el centro de la pantalla horizontal y verticalmente segun la resolucion del usuario que visite la web. Yo trabajo con 1280x1024 en casa pero los diseños de las web no suelen llevar ese formato y mi idea esque se centre automaticamente, estoy mirando javascript como forma de hacer algun condicional tipo CASE con varias posibilidades segun las resoluciones de los visitantes.

Estoy mirando y he visto que con jQuery parece que se puede modificar las opciones de las CSS relativas a los DIV. Pero segun parece y he podido leer no hay ningun "comando" CSS para "auto alinear" el div verticalmente :/
  #4 (permalink)  
Antiguo 25/02/2011, 11:49
 
Fecha de Ingreso: febrero-2011
Ubicación: Ávila, España
Mensajes: 44
Antigüedad: 6 años, 9 meses
Puntos: 1
Respuesta: Centrar un div en vertical

PD: Ese codigo si me hace lo que quiero pero creo que cambiando de resolucion no funcionaria porque los pixeles variarian no?
  #5 (permalink)  
Antiguo 25/02/2011, 14:41
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar un div en vertical

Hay un fallo conceptual si se pretende centrar en la vertical (usando márgenes negativos) una caja que mide 1024x600 px

Y no, css no tiene comandos.
Tiene propiedades y distintos valores para ello.

Y sí, css sí posibilita el centrado vertical. Otra cosa muy distinta, y totalmente ajena al propio css, es que haya navegadores muy deficientes en cuanto al soporte de ellas.

Declare el html con /display: table/. Al body como /table-row/ y a su div como /table-cell/ además de usar vertical-align con el valor apropiado en éste último.

Pero vamos, que me remito al inicio. Con semejante tamaño, el planteamiento debería ser otro.
  #6 (permalink)  
Antiguo 25/02/2011, 15:56
 
Fecha de Ingreso: febrero-2011
Ubicación: Avellaneda, Buenos Aires
Mensajes: 39
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Centrar un div en vertical

La idea no es mala, aunque no es algo habitual.
En principio deberías disminuir un poco el ancho del div, aprox a unos 960px.
De ese modo te aseguras de que cualquier monitor de 1024px o más, vean tu sitio correctamente.
Y también deberías hacer uso de Javascript.
Dos funciones que te van a ser útiles:

Código javascript:
Ver original
  1. window.innerWidth y window.innerHeight

Devuelven el ancho y alto disponible en el documento.
Entonces, si ya sabés que tu div tiene 600px de alto, podrías usar un código parecido a este:

Código Javascript:
Ver original
  1. document.getElementById('divPrincipal').style.marginTop = -window.innerHeight / 2

Es solo una idea.
  #7 (permalink)  
Antiguo 26/02/2011, 06:23
 
Fecha de Ingreso: febrero-2011
Ubicación: Ávila, España
Mensajes: 44
Antigüedad: 6 años, 9 meses
Puntos: 1
Respuesta: Centrar un div en vertical

Ok, genial 2 respuestas muy buenas y que vere haber que solucion le puedo dar; solo otra preguntita, cuando pongo un div con position:relative; que se puede hacer para quitar el bordecito que deja arriba, es decir, porque deja como un margen vertical?.

Saludos y gracias

Etiquetas: vertical
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 21:40.