How can I center a div which is direct child to body?

Question

I'm trying to center this div both main axis and cross axis but justify-content works but align item doesn't. Can't figure out why it is happening.

* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 10px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
}

<div class="formdiv">
  <form class="form">

    <br>
    <label for="email">Username</label>
    <br>
    <input type="email" id="email" placeholder="Username" required>
    <br>
    <label for="password">Password</label>
    <br>
    <input type="text" id="password" placeholder="Password" required>
    <br>
    <button>submit</button>

  </form>
</div>

score 0 · Accepted Answer · answered Jan 03 '23 at 16:01

The div and the form are centered, but the body is only as tall as they are. You'd have to give it a larger height.

body {
  min-height: 100vh;
}

body {
  font-size: 10px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<div class="formdiv">
  <form class="form">

    <br>
    <label for="email">Username</label>
    <br>
    <input type="email" id="email" placeholder="Username" required>
    <br>
    <label for="password">Password</label>
    <br>
    <input type="text" id="password" placeholder="Password" required>
    <br>
    <button>submit</button>

  </form>
</div>

score 0 · Answer 2 · answered Jan 03 '23 at 16:06

By default, the body will take the height of the contents. Try giving height to the body.

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  font-size: 10px;
  background-color: rgb(255, 255, 255);
  display: grid;
  place-items: center;
}

<div class="formdiv">
  <form class="form">

    <br>
    <label for="email">Username</label>
    <br>
    <input type="email" id="email" placeholder="Username" required>
    <br>
    <label for="password">Password</label>
    <br>
    <input type="text" id="password" placeholder="Password" required>
    <br>
    <button>submit</button>

  </form>
</div>

score 0 · Answer 3 · answered Jan 03 '23 at 16:06

The form doesn't appear centered because the body element itself only occupies the height of the content. If you set the min-height of the body to 100vh then justify content works as intended. See below

* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 10px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* added this */
  min-height: 100vh;
}

<div class="formdiv">
  <form class="form">

    <br>
    <label for="email">Username</label>
    <br>
    <input type="email" id="email" placeholder="Username" required>
    <br>
    <label for="password">Password</label>
    <br>
    <input type="text" id="password" placeholder="Password" required>
    <br>
    <button>submit</button>

  </form>
</div>

Also ... I use grid. Even less CSS!

* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 10px;
  background-color: rgb(255, 255, 255);

  display: grid;
  place-items: center;
  
  /* added this */
  min-height: 100vh;
}

<div class="formdiv">
  <form class="form">

    <br>
    <label for="email">Username</label>
    <br>
    <input type="email" id="email" placeholder="Username" required>
    <br>
    <label for="password">Password</label>
    <br>
    <input type="text" id="password" placeholder="Password" required>
    <br>
    <button>submit</button>

  </form>
</div>

How can I center a div which is direct child to body?

3 Answers3