[SOLUCIONADO] centro de div responsive

[arcanisgk122]

Hola amigos, estoy tratando de hacer unas cajas de tamaños dinamicos.

la idea es tener un div centrodo en pantalla con un minitmo de 600PX y un maximo de 800 px pero el maximo no me funciona:

Código CSS:

.caja{
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 600px;
    max-width: 800px;
    height: 400px;
    margin-top: -200px;
    margin-left: -300px;
    }
 

[siddartha23]

Podrías probar aumentándole un tamaño en porcentaje al div para que sea flexible y dependa del tamaño de la pantalla { width:100%;}...

Otra cosa, por que no reemplazas las líneas 2,3,4,8 y 9 por {margin: 0 auto;} si quieres que el div esté centrado??

[pzin]

Como dicen, tienes que especificar que mida 100%. Esto es así debido a que al posicionar el elemento de forma absoluta se pierde la anchura automática del elemento en bloque —auto.

Probablemente también necesitarás centrarlo dependiendo de su anchura, que no conocerás. Luego podrías usar transform, entonces te quedaría algo así:

Código CSS:

.caja {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  min-width: 600px;
  max-width: 800px;
  height: 400px;
  transform: translate(-50%);
}
 

Ya que necesitas moverlo también hacia arriba, usé translate en lugar de usar sólo translateX, te ahorras una linea.

siddartha23 es un elemento posicionado de forma absoluta, ahí no funcionan, ni deben, los márgenes automáticos.