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?