0

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?

1 respuesta 1

1

Puedes hacerlo pero solo especificando altura en el html y body, donde el .flexbox queda intacto:

html, body {
    height: 100%; /*Define altura pero de toda la página */
    margin: 0;
    font-family: sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center; /* Centra verticalmente */
}

.flexbox {
    display: flex;
    justify-content: center;
}

.flexbox__flex-item {
    width: 100px;
    height: 100px;
    background-color: red;
}
<!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>

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.