1

quiero poner un div encima de otro, justo en el centro del div padre

#uno {
  position: relative;
  text-align: center;
}

#padre{
position:absolute;
}
<div id="padre">holaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa como estaaaaaaaaassssssssssssssssssdddddddddddddddddddddddddddddddddddssss
  <div id="uno">cc</div>
</div>

2 respuestas 2

5

Realmente estás usando al revés las posiciones. Si quieres posicionar un div sobre otro tendrías que indicar como relative el div padre y como absolute el hijo para que este tomara referencia del primero.

Posteriormente, para poder centrarlo respecto al padre podrás usar left: 0 y right: 0 que junto con margin: 0 auto harán que el div hijo se posicione en el centro del padre. Le tendrás que asignar una anchura ya que si no tu div hijo ocupará el 100% de la pantalla.

Por último, si quieres que esté el div hijo encima del div padre, puedes utilizar la propiedad top: 0 para posicionarlo en la parte superior del div padre.

Tu ejemplo modificado:

#padre{
  position:relative;
  background-color: green;
}

#uno {
  position: absolute;
  background-color: red;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 20px;
}
<div id="padre">holaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa como estaaaaaaaaassssssssssssssssssdddddddddddddddddddddddddddddddddddssss
  <div id="uno">cc</div>
</div>

Si tienes dudas sobre como usar la propiedad position puedes consultar la pregunta-respuesta que di en esta otra pregunta: ¿Cual es la diferencia entre position: relative, position: absolute y position: fixed?.

5

Centrado absoluto usando top, left, right, bottom y margin

#padre {
  background: coral;
  border-radius: 4px;
  height: 100px;
  position: relative;
  width: 100px;
}

#uno {
  background: gold;
  border-radius: 4px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  height: 70px;
  width: 70px;
}
<div id="padre">PADRE
  <div id="uno">HIJO</div>
</div>

Centrado absoluto usando left, top y transform

#uno {
  background: gold;
  border-radius: 4px;
  height: 70px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
}

#padre{
  background: coral;
  border-radius: 4px;
  height: 100px;
  position: relative;
  width: 100px;
}
<div id="padre">PADRE
  <div id="uno">HIJO</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.