how do vertically align login form between banner and footer

Question

Given I have the html and css in the snippet below the question, how can I vertically centre the login view no matter what screen height is?

I have tried this for the .login-layout__positioner class:

.login-layout__positioner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    top: 42%;
    transform: translateY(-42%);
}

But this does not centre well in large screen heights?

Is there a better way?

body {
  height: 100%;
  background-color: #f7f7f4;
}

.app-layout__body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-layout__container {
  flex: 1 0 auto;
}

.banner__container {
  background-color: #fff
}

.banner__top {
  padding-top: 15px;
}

.login-layout__container {
  background-color: #f7f7f4;
  width: 100%;
}

.login-layout__positioner {
  text-align: center;
  margin: auto;
}

footer {
  background-color: #0065bd;
}

a {
  color: #fff;
}

ul {
  list-style: none;
  margin-left: 0;
}

li {
  display: inline;
}

.form__group {
  background-color: #fff;
}

<body>
  <div id="root">
    <div class="main-content">
      <div class="app-layout__body">
        <div class="app-layout__container">
          <div class="banner__container">
            <div class="banner__top">
              <div>
                <div>
                  <h2>Banner</h2></div>
              </div>
            </div>
          </div>
          <div class="login-layout__container">
            <div class="login-layout__positioner">
              <div class="form__group">
                <div>
                  <form>
                    <div class="login__container">
                      <div class="login__wrapper">
                        <div>
                          <div>
                            <div class="login__form__elements">
                              <div>
                                <div>
                                  <h2 class="">Sign In</h2></div>
                              </div>
                              <div>
                                <div>
                                  <div>
                                    <label for="email" id="email-label" class="label__default label__strong label__double-margin">Email</label>
                                    <div>
                                      <input type="text" autocomplete="off" class="input__default form-control" id="email" name="email" aria-invalid="false" aria-describedby="email-error" value="">
                                    </div>
                                    <div id="email-error" aria-hidden="true" role="alert"></div>
                                  </div>
                                </div>
                              </div>
                              <div>
                                <div>
                                  <div>
                                    <label for="password" id="password-label">Password</label>
                                    <div>
                                      <input type="password" autocomplete="off" id="password" name="password" aria-invalid="false" aria-describedby="password-error" value="">
                                    </div>
                                    <div id="password-error" aria-hidden="true" role="alert"></div>
                                  </div>
                                </div>
                              </div>
                              <div>
                                <div><a to="/">Forgotten your password?</a></div>
                                <div>
                                  <button type="submit">LOGIN</button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer>
          <div>
            <div>
              <div>
                <ul>
                  <li><a target="_blank" href="/static/about">About</a></li>
                  <li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
                  <li><a target="_blank" href="/static/cookies">Cookies</a></li>
                  <li><a target="_blank" href="/static/privacy">Privacy</a></li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
  </div>
</body>

Possible duplicate of [How to vertically center a div for all browsers?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Temani Afif, Dec 08 '17 at 23:25

score 1 · Accepted Answer · answered Dec 08 '17 at 23:03

When it comes to centering something both vertically and horizontally I like to use css flex. Adding it to the parent container surrounding the element you wish to center will cause it to flex in all screen dimensions and heights. Justify-content centers it horizontally and align-items centers it vertically. Here is a helpful guide to learn more about flex:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent-container{
width:100vw;
height:100vh;
background-color:black;

display:flex;
justify-content:center;
align-items:center;
}

.child{
width:50%;
background-color:white;
text-align:center;
}

<div class="parent-container">
  <div class="child">
    <h1>Centered</h1>
  </div><!-- child -->
</div><!-- parent-container -->

score 0 · Answer 2 · answered Dec 08 '17 at 23:13

Flexbox and grid work great for this, the difference being that grid is said to be 2 dimensional whereas flexbox is 1 dimensional. See MDN's Relationship of flexbox to other layout methods. BTW: If you want a sticky footer add min-height: 100vh; to your container.

iMarkDesigns · Answer 3 · 2017-12-08T23:52:46.073

Both Ron and Jeh's answer are correct. Though I'm wondering why do you have so many container wrappers then if you can just use certain wrappers to display your entire login form, banner and footer.

Here's my template for my custom login forms.

You will noticed that I use calc on height to differentiate the height of banner and footer and then less it to the height of your .section-login container, in which it will automatically adjusted the height no matter what the browser height does. And I declared min-height just to avoid overlaying above to each container wrapper.

Hope this helps.

.login {
  background: pink;
  margin: 0;
  padding: 0;
}

.body-wrapper {
  background: white;
  width: 100%;
  height: 100vh;
}

.hero-wrapper,
.globalfooter {
  background: #CCC;
  text-align: center;
}

.hero-wrapper {
  line-height: 200px; /* just for the text v-alignment only */
  height: 200px;
}

.globalfooter {
  line-height: 100px; /* just for the text v-alignment only */
  height: 100px;
}

.section-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #EEE;
  min-height: calc(100% - (200px + 100px));
  padding: 30px;
  box-sizing: border-box;
}

.help-text-wrapper {
  font: 300 12px sans-serif;
  color: red;
  text-align: center;
  margin: 15px 0 0;
}

.help-text-wrapper.hidden {
  /* Remove comment to enable
  display: none; */
}

h1 { 
  font: 600 24px sans-serif;
  text-align: center;
  text-transform: uppercase;
  margin: 0 0 15px;
}

form {
  background: #FFF;
  font: 300 12px sans-serif;
  text-transform: uppercase;
  width: 260px;
  padding: 30px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.50);
  box-sizing: border-box;
  border-radius: 3px;
}

form > fieldset {
  margin: 0 0 15px;
  padding: 0;
  border: 0;
}

form > fieldset label:first-child {
  display: block;
  margin-bottom: 15px;
}

form input {
  display: block;
  width: 100%;
  height: 30px;
  margin: 5px 0;
  padding: 6px;
  box-sizing: border-box;
}

form button {
  display: block;
  background: #888;
  color: #FFF;
  text-transform: uppercase;
  height: 30px;
  margin: auto;
  padding: 7px 15px;
  border: 0;
  cursor: pointer;
}

<body class="login page">
  <div class="body-wrapper">
    <header class="hero-wrapper">
      Banner
    </header>

    <section class="section-login">
      <h1>Sign In</h1>
      <form action="" method="post">
        <fieldset>
          <label for="username">
            Username
            <input type="text" id="username" value="" placeholder="Username" autofocus>
          </label>
          <label for="password">
            Password
            <input type="password" id="password" value="" placeholder="Password">
          </label>
        </fieldset>
        <button type="submit">Login / Sign In</button>
      </form>
      <div class="help-text-wrapper hidden">
        Something around here after fallback.
      </div>
    </section>

    <footer class="globalfooter">
      Footer
    </footer>
  </div>
</body>

score 0 · Answer 4 · answered Dec 09 '17 at 13:11

Just change some class properties which I wrote down:

.login-layout__positioner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.form__group {
    background-color: transparent;
}

a {
    color: #333;
}

footer a {
    color: #fff;
}

how do vertically align login form between banner and footer

4 Answers4