Foros del Web » Creando para Internet » CSS »

Centrar un div en cualquier resolucion

Estas en el tema de Centrar un div en cualquier resolucion en el foro de CSS en Foros del Web. Estoy utilizando div's y quiero centrar una caja para colocar dentro mi login, pero quiero que la caja esté centrada tanto horizontalmente como verticalmente, según ...
  #1 (permalink)  
Antiguo 04/12/2010, 07:15
Avatar de bandolera  
Fecha de Ingreso: abril-2009
Mensajes: 558
Antigüedad: 8 años, 7 meses
Puntos: 6
Pregunta Centrar un div en cualquier resolucion

Estoy utilizando div's y quiero centrar una caja para colocar dentro mi login, pero quiero que la caja esté centrada tanto horizontalmente como verticalmente, según la resolución o tamaño del monitor que se esté utilizando.

Cómo hago esto??
  #2 (permalink)  
Antiguo 04/12/2010, 09:11
 
Fecha de Ingreso: julio-2008
Ubicación: Barcelona
Mensajes: 2.095
Antigüedad: 9 años, 4 meses
Puntos: 164
Respuesta: Centrar un div en cualquier resolucion

Horizontalmente puedes hacer -> margin: 0 auto; o div align="center", verticalmente es un poco más complicado, puedes usar porcentajes de margin-top, o una hoja de estilo para cada resolución.

Un saludo!
  #3 (permalink)  
Antiguo 04/12/2010, 10:52
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: Centrar un div en cualquier resolucion

A ver si esto te sirve:

CSS

#caja1 {display: table; height: 200px; border: 1px solid #f00; position: relative;width: 200px;}

#caja2 {display: table-cell; vertical-align: middle;}

#caja3 {border: 1px solid #0f0; position: relative;}


PARA Internet Explorer: (lo puedes poner en una css aparte con comentarios condicinales)
#caja2 {position: absolute; top: 50%;}
#caja3 {top: -50%;}

HTML

<div id="caja1">
<div id="caja2">
<div id="caja3">
CONTENIDO DE TU WEB
</div>
</div>
</div>
  #4 (permalink)  
Antiguo 04/12/2010, 11:03
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar un div en cualquier resolucion

¿Esa caja es de dimensiones conocidas a priori o se desconocen?
¿Qué navegadores y versiones debe abarcar, especialmente de ie?

De ello depende los códigos a utilizar.
  #5 (permalink)  
Antiguo 04/12/2010, 15:36
 
Fecha de Ingreso: mayo-2008
Mensajes: 10
Antigüedad: 9 años, 7 meses
Puntos: 0
De acuerdo Respuesta: Centrar un div en cualquier resolucion

Creo que deberías leer este artículo, creo que te puede ayudar al igual que algunos de las respuestas que ya te han dado.

[URL="http://www.csslab.cl/2007/01/12/centrado-vertical-con-css/"]http://www.csslab.cl/2007/01/12/centrado-vertical-con-css/[/URL]

  #6 (permalink)  
Antiguo 04/12/2010, 16:06
 
Fecha de Ingreso: diciembre-2010
Ubicación: Argentina
Mensajes: 42
Antigüedad: 7 años
Puntos: 0
Respuesta: Centrar un div en cualquier resolucion

Si usas px no tendrás problemas. Si usas % tendras un problema tras otro indefinidamente. Consejo: Usa px
  #7 (permalink)  
Antiguo 05/12/2010, 07:43
Avatar de bandolera  
Fecha de Ingreso: abril-2009
Mensajes: 558
Antigüedad: 8 años, 7 meses
Puntos: 6
De acuerdo Respuesta: Centrar un div en cualquier resolucion

Gracias por todas las respuestas.

Lo que quiero hacer es poner en el centro de la pantalla una caja para el login de mi sistema. Y quiero hacerlo centrado, o por lo menos lo más centrado posible.

No tengo una medida exacta de la caja login, pero debería poder centrarse cierto?
Como el login de Joomla o algún otro sistema.

Y no debería depender del navegador, pues si un programador hace un sistema para internet, debe considerar que se utilicen todos los navegadores más populares, cierto??


Etiquetas: Ninguno
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 13:19.