How to center a form on the screen (between navigation bar and footer)

Question

First of all, this isn't a duplicated question. I checked all previous posted questions similar to this type of issue and I didn't find any solution for this specific scenario.

I'm using Bootstrap 4 ~~and here is my app URL: https://loving-shaw-e78a46.netlify.com/auth/login~~

(I share an URL because I don't know how to post the CSS and HTML of a React app, code is huge and Stack Overflow doesn't let me to post it because of the size limit).

So what I would like to do is:

Make <main class="container"> fill all the height between the navigation bar and footer.
Center vertically <div class="form-page">.

Here's an image:

Please, don't downvote this question, I'm so sorry for not be able to post the CSS and HTML, I'm using `React` + `styled-components` and I don't know how to get the styles, to be honest. I read a lot about CSS Flexbox before post this question but I wasn't able to do it. — Alfonso, Oct 19 '18 at 09:49

score 1 · Answer 1 · answered Oct 19 '18 at 09:49

You can do this with flexbox:

First you have to surround everything within a div that looks like this:

<div class="d-flex flex-column" style="height: 100vh">
  // header
  // content
  // footer
</div>

The 100vh stands for view height. Now to make sure your content is the size of the page add flex: 1. That's the answer on your first question.

And to center it add justify-content-center and align-items-center.

So the end result should look like:

<div class="d-flex flex-column" style="height: 100vh">
  // header

  <div class="justify-content-center align-items-center" style="flex: 1">
    // content
  </div>

  // footer
</div>

This also means you don't have to force your footer down with position absolute or fixed.

Thanks tom, you're technically right but it didn't work at all with the code I provided in the question. — Alfonso, Oct 19 '18 at 10:07

yunzen · Accepted Answer · 2018-10-19T10:08:48.580

1

I used flexbox
I needed to overwrite some of your values

#app > div {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* overwrite */
body {
  margin-bottom: 0;
}
footer.cmTXSD  {
  position: relative;
}

Note

the margin-bottom overwrite 'deletes' your margin-bottom: 313px; 313px is like a magic number you did not calculate, but measured by experiment. This is a strong code smell in CSS. If you need to use magic numbers in CSS, try to think it over.

edited Oct 19 '18 at 10:08

answered Oct 19 '18 at 09:58

yunzen

32,854
11
73
106

Amazing, thank you. – Alfonso Oct 19 '18 at 10:06
`margin-bottom: 313px` aka the magic number it was a way to make the footer "sticky" to the bottom haha. Here is the [Bootstrap example](https://getbootstrap.com/docs/4.1/examples/sticky-footer/). – Alfonso Oct 19 '18 at 10:16
1

Oh that d***d bootstrap: Sticky footer is easy: https://codepen.io/HerrSerker/pen/PyeRQx – yunzen Oct 19 '18 at 10:30
Woahh, you're the man. – Alfonso Oct 19 '18 at 10:47

score 0 · Answer 3 · answered Oct 19 '18 at 09:58

You just need to add few css code to make the form look in the center of the container. Please find below code and add to your css file.

     .container {height: calc(100vh - 383px);position: relative;}
     .container .form-page {position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        background: #fff;
        height: 500px;
        width: 500px;
        padding: 15px 30px;}

Thank You.

How to center a form on the screen (between navigation bar and footer)

3 Answers3

Note