es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Posicionar un div en porcentaje relativo al div padre.

05 Jun, 2023 Programación

Estoy tratando de crear una escena en CSS y para ello estoy usando position: relative y position:absolute.
Mi problema es que estoy tratando de establecer mi div hijo en el centro de mi div padre usando algunas propiedades CSS y parece que no funciona.

Esto es lo que hago:

.game {
  background-color: #5386e4;
  overflow: hidden;
  position: relative;
}

.fish {
  height: 320px;
  width: 300px;
  position: absolute;
  transform-origin: center; // Aquí estoy tratando de establecer el origen del div en su centro.
  top: 50%;  // Y aquí estoy tratando de centrar verticalmente el div hijo en el div padre.
  left: 50%; // Lo mismo aquí pero horizontalmente.
  z-index: 10000;
  background-color: #10121b;
}

Esto es lo que hace:

Tenga en cuenta que mi div .game también es hijo de otro div. Avíseme si necesita ver más de lo que está sucediendo en mi HTML o CSS.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para centrar un div hijo horizontalmente y verticalmente dentro de su div padre, puedes usar el siguiente CSS:

    .child-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

    En tu caso, puedes agregar estos estilos a tu clase .fish de la siguiente manera:

    .fish {
  height: 320px;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  background-color: #10121b;
}

    Esto debería centrar tu div .fish tanto horizontal como verticalmente dentro de su div padre.

Comments are closed.