Estoy intentando centrar un elemento usando Flexbox solo con justify-content: center
y align-items: center
, pero me encuentro con dificultades. Quiero evitar definir una altura específica en el contenedor para que se ajuste dinámicamente al contenido. A continuación, muestro el código que estoy utilizando:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Flex-direction.css">
<title>Flex-direction</title>
</head>
<body>
<div class="flexbox">
<div class="flexbox__flex-item"></div>
</div>
</body>
</html>
CSS:
body {
margin: 0;
font-family: sans-serif;
}
.flexbox {
display: flex;
justify-content: center;
/* No se define height aquí */
}
.flexbox__flex-item {
width: 100px;
height: 100px;
background-color: red;
}
En el código anterior, el contenedor .flexbox
no tiene una altura definida, por lo que no puedo centrar el elemento .flexbox__flex-item
verticalmente sin usar height: 100vh
en el contenedor. Quiero saber si es posible centrar el elemento usando solo justify-content: center
y align-items: center
sin especificar una altura explícita para el contenedor.
Lo que he intentado:
- He probado a añadir
height: 100vh
al contenedor.flexbox
, lo cual funciona, pero no quiero definir una altura fija. - He investigado en la documentación de Flexbox y en tutoriales, pero no he encontrado una solución que funcione sin establecer una altura en el contenedor.
¿Hay alguna manera de hacer esto sin tener que especificar la altura del contenedor?