Why is my div not centered vertically and horizontally?

Question

I have this code:

#login-form {
    display: flex;
    justify-content: center;
    align-items: center;
}

<!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 rel="stylesheet" href="../style/loginStyle.css">
    <title>MobBi - Login</title>
</head>
<body>
    <div id="login-form">
        <form action="" method="post">
            <label for="login">Login</label>
            <br>
            <input type="text" id="login-field" name="login" placeholder="Digite seu login aqui">
            <br>
    
            <label for="senha">Senha</label>
            <br>
            <input type="password" id="senha-field" name="senha" placeholder="Digite sua senha aqui">
            <br>
    
            <button type="submit" id="botao-entrar" onclick="entrar()">Entrar</button>
        </form>
    </div>

    <script src="../javascript/loginScript.js"></script>
</body>
</html>

And my div is only centered horizontaly, but not verticaly, why is my div not centered verticaly too?

Youssouf Oumar · Answer 1 · 2023-02-13T08:34:37.190

It's actually centered vertically inside the login-form. The thing is that the login-form's height is equal to its content. You could overwrite that height through CSS, like this:

body{
  margin:0;
}
#login-form {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height:100vh; /* line I added */
}

<!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 rel="stylesheet" href="../style/loginStyle.css">
    <title>MobBi - Login</title>
</head>
<body>
    <div id="login-form">
        <form action="" method="post">
            <label for="login">Login</label>
            <br>
            <input type="text" id="login-field" name="login" placeholder="Digite seu login aqui">
            <br>
    
            <label for="senha">Senha</label>
            <br>
            <input type="password" id="senha-field" name="senha" placeholder="Digite sua senha aqui">
            <br>
    
            <button type="submit" id="botao-entrar" onclick="entrar()">Entrar</button>
        </form>
    </div>

    <script src="../javascript/loginScript.js"></script>
</body>
</html>

score 0 · Accepted Answer · answered Jun 26 '22 at 17:44

flexbox doesn't have any height which means that it cannot center the form vertically. To center the form, you need to give the html, body and the #login-form a height 100% as shown in the snippet below.

html,
      body {
        height: 100%;
      }
      #login-form {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
      }

<!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" />
    
    <title>MobBi - Login</title>
  </head>
  <body>
    <div id="login-form">
      <form action="" method="post">
        <label for="login">Login</label>
        <br />
        <input
          type="text"
          id="login-field"
          name="login"
          placeholder="Digite seu login aqui"
        />
        <br />

        <label for="senha">Senha</label>
        <br />
        <input
          type="password"
          id="senha-field"
          name="senha"
          placeholder="Digite sua senha aqui"
        />
        <br />

        <button type="submit" id="botao-entrar" onclick="entrar()">
          Entrar
        </button>
      </form>
    </div>

    <script src="../javascript/loginScript.js"></script>
  </body>
</html>

I hope this helps

Why is my div not centered vertically and horizontally?

2 Answers2