0

I'm trying to center my main div for a login page both vertically and horizontally,

I've tried centering the div using d-flex align-items-center & justify-content-center , it centers the content horizontally but will not move it vertically to the middle of the page.

Any insight as to why my div won't move vertically?

Thanks.

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  /*position: relative;*/
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="text-center d-flex flex-column align-items-center justify-content-center">
  <h1 class="display-4">Rotamould<br />Planning<br />Solution</h1>

  <form method="post">
    <div class="form-group">
      <label for="username">Username:</label>
      <input type="text" class="form-control" id="username" name="Username" asp-for="Username" />
    </div>
    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" class="form-control" id="password" name="Password" asp-for="Password" />
    </div>
    <button style="margin-top: 20px;" type="submit" class="btn btn-primary">Login</button>
  </form>

</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Gorilla
  • 13
  • 3
  • Please tag your Bootstrap version. – isherwood Mar 29 '23 at 15:25
  • 1
    Your div _is_ centered, but it's centered on a container that's the same height. Add `vh-100`, for example, to make the container the full height of the viewport. You can easily see the problem by inspecting the document with your browser's dev tools. – isherwood Mar 29 '23 at 15:28

0 Answers0