0

I have looked at virtually every similar post on here and cannot figure this out. Why is my form only being centered horizontally and not vertically?

HTML

<body>
    <div class="container">
        <form>
            <div class="profilePic">
                <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" alt="Avatar"
                    class="avatar" />
            </div>
            <div class="formFields">
                <input type="text" placeholder="Enter Username" name="uname" required />
                <input type="password" placeholder="Enter Password" name="pass" required />
                <button type="submit">Login</button>
            </div>
            <div class="formFields" style="background-color:#f1f1f1">
                <span class="pass">Forgot <a href="#">Username</a> or </a> <a href="#">Password?</a></span>
            </div>
        </form>
    </div>
</body>

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #343a40;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
form {
  border: 3px solid #f1f1f1;
  background-color: rgb(228, 228, 228);
  margin: auto;
  width: 50%;
}

Current

I want the form centered horizontally and vertically.

enter image description here

Anthony Hudson
  • 21
  • 5
  • Just searching on SO.....[https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) – Sfili_81 Apr 15 '21 at 13:23

1 Answers1

1

try this

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
Brahim Baif
  • 21
  • 3
  • That's one of the fixes I have seen on other questions, but it's not doing anything, unfortunately. it's centered horizontally hugging the top of the browser but not vertically. – Anthony Hudson Apr 15 '21 at 13:29
  • What height value are you giving to your ```.container```? – prettyInPink Apr 15 '21 at 13:47
  • what is the result you want to achieve? – Brahim Baif Apr 15 '21 at 13:52
  • I don't have a height value set for container. I basically just want the height to be automatically set based on the form's height with padding. I want my dive centered both horizontally and vertically. I have edited the question with a picture of the current result. – Anthony Hudson Apr 15 '21 at 23:36