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>
hubman
  • 2,624
  • 9
  • 35
  • 75

2 Answers2

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?.

Francisco Romero
  • 16,194
  • 5
  • 30
  • 61
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>
gugadev
  • 18,776
  • 1
  • 24
  • 49