1

I found plenty of help for centering a login form but once centered it's slightly offset by what I believe must be the navbar. I can't figure out why this is happening as the centering relies on the body height set at 100% in my css. How do I center the login form in the center of the document without it being offset by the navbar? (it's lower than the exact center of the page) What I mean is to the eye the form isn't in the center of the screen.

CSS

html, body {
background-color: lightgray;
height: 100%;

PHP/HTML

    <div class="container h-100">
      <div class="row h-100 justify-content-center align-items-center">
<div class="col-10 col-md-8 col-lg-6">
  <form action="{{ path('login') }}" method="post" >
    <div class="form-group">
      <label for="_username">Username:</label>
      <input type="text" class="form-control" placeholder="Username..." required name="_username">
      </div>
      <div class="form-group">
      <label for="_password">Password:</label>
      <input type="password" class="form-control" placeholder="Password..." required name="_password">
    </div>
    <div class="form-group">
      <button class="btn btn-success">Login</button>
    </div>
  </form>
</div>

KStackName
  • 11
  • 2
  • 1
    Please provide more code, or screenshots. There is no navbar in your provided code – Marius Dec 18 '19 at 13:32
  • Related if not dupe - https://stackoverflow.com/questions/38948102/center-and-right-align-flexbox-elements – Paulie_D Dec 18 '19 at 15:09
  • It will depend on how you define center of the page. If you want the login form absolute center of your SCREEN, let's say, then have your navbar on `position:absolute` to take it out of the calculations when centering (vertically I presume?) – Nam Kim Dec 18 '19 at 22:59
  • Marius Navbar is in the template, it's just pasted code for the moment nothing special = template with a standard bootstrap 4 navbar and what you see above is the only other thing in the body section. Thanks Nam Kim I will look into the position:absolute for the Navbar. Paulie_D thanks but the link is not really related to the problem I'm having. Thanks again all! – KStackName Dec 19 '19 at 17:00
  • A screenshot of what's wrong, would help answer the question. – Esocoder Dec 19 '19 at 17:11

0 Answers0