0

Luego de buscar en un montón de posts, quería saber porque no me funciona como a los otros este código.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Login</title>
</head>
<body>
<main>
<div class="d-flex align-items-center justify-content-center">
    <form autocomplete="off">
        <div class="mb-2">
            <label for="usr" class="form-label">Usuario</label>
            <input type="text" class="form-control">
        </div>
        <div class="mb-2">
            <label for="pwd" class="form-label">Contraseña</label>
            <input type="password" class="form-control">
        </div>
        <div class="mb-2">
            <span class="btn btn-primary">Entrar</span>
        </div>
    </form>
</div>
</main>
</body>
</html>

las sentencias d-flex align-items-center justify-content-center funcionan y lo muestran con fotos que el elemento está centrado tanto vertical como horizontalmente. Yo no consigo eso, solo consigo centrarlo horizontalmente y se queda pegado en la parte superior. fail ¿Que estoy haciendo mal?

1 respuesta 1

0

Sí lo está centrando verticalmente pero no se ve porque el div que contiene el formulario se está ajustando a su contenido. Agrega un estilo para hacer que el div tenga un 100% del height del viewport.

div.d-flex{
 height: calc(100vh);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Login</title>
</head>
<body>
<main>
<div class="d-flex align-items-center justify-content-center">
    <form autocomplete="off">
        <div class="mb-2">
            <label for="usr" class="form-label">Usuario</label>
            <input type="text" class="form-control">
        </div>
        <div class="mb-2">
            <label for="pwd" class="form-label">Contraseña</label>
            <input type="password" class="form-control">
        </div>
        <div class="mb-2">
            <span class="btn btn-primary">Entrar</span>
        </div>
    </form>
</div>
</main>
</body>
</html>

4
  • He visto que también funciona sin la función experimental calc().
    – Sal
    el 20 abr. 2021 a las 14:49
  • Sí, también. En todo caso es necesario que el div del form tenga el 100% del alto del viewport para que align-items-center funcione.
    – Lobos
    el 20 abr. 2021 a las 14:57
  • porque funciona con 100vh y no con 100%? el 20 abr. 2021 a las 16:09
  • Porque 100% es relativo al alto del padre, si el padre es de 100px entonces 100% serán 100px. 100vh es la altura del viewport, o sea el alto total de lo que se ve en pantalla. devcode.la/tutoriales/unidades-vh-vw-css
    – Lobos
    el 20 abr. 2021 a las 17:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.