1

Estoy trabajando en una página web sencilla y me he encontrado con un problema que no he podido resolver. Tengo dos elementos div, uno dentro del otro, y quiero centrar verticalmente el div interno dentro del div externo usando solo CSS. He probado varias soluciones pero no logro comprender cómo hacer para centrarlo.

A continuación dejo el código que estoy usando:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centrar un div</title>
<style>
  .contenedor {
    width: 300px;
    height: 300px;
    background-color: lightblue;
    position: relative;
  }

  .centro {
    width: 100px;
    height: 100px;
    background-color: coral;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
</style>
</head>
<body>
  <div class="contenedor">
    <div class="centro"></div>
  </div>
</body>
</html>

En este código, el div de clase centro se centra horizontalmente dentro del div de clase contenedor, pero no logro que se centre verticalmente correctamente. He probado con position: absolute y top: 50%; transform: translateY(-50%); como se sugiere en algunos tutoriales, pero parece que no estoy entendiendo algo correctamente.

¿Por qué mi enfoque no está funcionando para centrar verticalmente el div interno? ¿O hay otras formas que debería considerar?

1

2 respuestas 2

1

Una solucion es utilizar justify-content: center; para centrar horizontalmente y align-items: center; para centrar verticalmente junto a display: flex; en el contenedor. Ademas quité algunas propiedades ya que no son necesarias (dependiendo de necesidades especificas).

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centrar un div</title>
<style>
  .contenedor {
    width: 300px;
    height: 300px;
    background-color: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .centro {
    width: 100px;
    height: 100px;
    background-color: coral;
  }
</style>
</head>
<body>
  <div class="contenedor">
    <div class="centro"></div>
  </div>
</body>
</html>

0
1) Antiguamente se usaba display: table; margin: 0 auto; te lo alinea horizontalmente.

2) display: flex; justify-content: center --> Horizontal; align-items: center --> Vertical;

3) display: grid; justify-content: center --> Horizontal; align-content: center --> Vertical; place-content: center --> Vertial y Horizontal.

4) Horizontal y verticalmente.
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

5) Horizontal y verticalmente.
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -[mitad de la altura];
  margin-left: -[mitad del ancho];

6) margin: 0 auto; --> Horizontalmente.

7)

.container {
  display: grid;
  place-items: center;
  height: 100vh; /* Opcional: establece la altura del contenedor al 100% del viewport */
}

8) nuevo metodo en la actualidad: margin: 0 auto --> horizontal; align-content: center --> vertical (sin ningun display)
1
  • Son mis notas al respecto, espero te sirvan
    – Alan Stone
    Commented el 29 jun. a las 20:22

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.