Traté de alinear el contenedor en el medio de la página, pero parece estar atascado en la parte superior de la página.

He leído una pregunta similar, pero no parecen trabajar. Copié algunos de los fragmentos de código, pero en mi navegador Firefox todavía parecen estar atascados en la parte superior de la página. No estoy seguro si es un problema del navegador.

Aquí está mi código.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Log In</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
  <div class="container d-flex justify-content-center h-100 mx-auto">
    <div class="row justify-content-center">
      <div class="col">
        <div class="card text-center" style="min-width: 23rem; max-width: 23rem;">
          <div class="card-header bg-success text-white text-center">Login</div>
          <div class="card-body">
            <form>
              <div class="form-row mb-2">
                <label for="username">Username</label>
                <input type="text" class="form-control" id="username">
              </div>
              <div class="form-row mb-4">
                <label for="Password">Password</label>
                <input type="password" class="form-control" id="password">
              </div>
              <div class="row">
                <div class=" col text-center">
                  <button type="submit" class="btn btn-success">Submit</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 
    <div class="container-fluid h-100 d-flex flex-column justify-content-center">
        <div class="row justify-content-center bg-info">
            <div class="col-4">
    
                <div class="card">
                    <div class="card-header">Access</div>
                    <div class="card-body">
                        <div class="form-group">
                            Nullam sapien massa, aliquam in cursus ut, ullamcorper in tortor. Aliquam codeply mauris arcu, tristique a lobortis vitae, condimentum feugiat justo.
                        </div>
                    </div>
                    <div class="card-footer text-right">
                        <button type="submit" class="btn btn-danger">ok</button>
                    </div>
                </div>
    
            </div>
        </div>
    </div> -->

</body>

</html>
0
user2390751 1 may. 2020 a las 10:07

2 respuestas

¡Así es como puedes hacer eso!

    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Log In</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      <style>          <--- Added style tag
        .box{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
        }
      </style>

    </head>

    <body>
      <div class="box container d-flex justify-content-center mx-auto">
        <div" class="justify-content-center">
          <div class="col">
            <div class="card text-center" style="min-width: 23rem; max-width: 23rem;">
              <div class="card-header bg-success text-white text-center">Login</div>
              <div class="card-body">
                <form>
                  <div class="form-row mb-2">
                    <label for="username">Username</label>
                    <input type="text" class="form-control" id="username">
                  </div>
                  <div class="form-row mb-4">
                    <label for="Password">Password</label>
                    <input type="password" class="form-control" id="password">
                  </div>
                  <div class="row">
                    <div class=" col text-center">
                      <button type="submit" class="btn btn-success">Submit</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>



    </body>

    </html>
0
Fareed Khan 1 may. 2020 a las 07:35

Puede lograr el comportamiento deseado agregando:

align-items: center;

Estilo CSS a la clase = "contenedor-fluido".

0
Azee 1 may. 2020 a las 07:20