CSS: position a div element vertically and horizontally in the center, position footer at the bottom

Question

I'm getting strange behavior for something that shouldn't be that difficult. So I have two goals here. I need the footer to actually look like a footer and be at the bottom of the page. Meanwhile, I want the div with the class ".center_div" to be in both the vertical and horizontal center of the page.

I've copied and pasted css from other solutions online expecting it to eventually work but... I haven't been successful. I'm going to keep google searching to try to find more solutions, I'm just confused at what could possibly be going wrong with my code.

The relevant bits of my html are as follows. I'm including the css cdns I'm using just in case those are actually the source of the problem. Also note that this is a flask application:

 #page-container { position: relative; min-height: 100vh; } .center_div { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 800px; } #footer { position: absolute; bottom: 0; width: 100%; } 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Bootstrap css and other basic formatting --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- Material Design Bootstrap --> <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.9/css/mdb.min.css" rel="stylesheet"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <div id="page-container"> <div class="center_div"> <h1>Cognitive Functions and Risk Assessment Task Prototype</h1> <p>Please enter the number of trials that you would like to have in the following field (any number from 1-100) then click submit</p> <form id="Trial_Form" action="/experiment_app" , method="post"> <input type="number" name="trials" min="1" max="100"> <input type="submit"> <script> $("#Trial_Form").submit(function(event) { alert("ALEEEEEEEEEEEEEERT"); }); </script> </form> <p>Upon clicking submit, the experimental application will be launched. Each trial will display as an interactive page using the JsPsych framework.</p> </div> <footer id="footer" class="page-footer unique-color"> <img src="{{ url_for('static', filename='images/cognew_logo.png')}}"> </footer> </div> 

And the result that it's getting me is...

Here's a fiddle demo containing my full html and css files. http://jsfiddle.net/vuz6Lp1d/1/

What's also weird is that my screenshot doesn't exactly look like the js fiddle version of my code. The screenshot shows that the footer is at the top of the page. The div is "centered" in that it is at the center of the page, but it's clearly erring off to the right/doesn't have the padding needed for the right side.

Edit 1

The solutions I got didn't quite work. I tried to make things a little more basic. I see how this code clearly was probably not right... And yes, I had just spent time troubleshooting and posted what I had last copy/pasted from another post on stack overflow with the same issue. Their situation probably didn't even quite apply to mine, i was trying what I could.

It's funny. margin: 0 auto; only centers the div horizontally, but not vertically. margin: auto 0; believe it or not... doesn't work at all. The div just stays in the top left. Here's a screencap of me inspecting element with margin: auto 0;

So now I'm just sticking with margin: 0 auto . This only vertically centers the <div> element. My footer is now at the bottom of the page like normal.

The CSS is now just

.center-div { 
width:800px;
margin: 0 auto;
}

Answer 1

In your .center_div , try this

position: absolute;
top: 50%;
left: 50%;
transform: translate (-50%,-50%);

Also, you could just use flex to center your div and it's contents, for example

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

Another alternative which is supported in all browsers is the use of margins.

Hope it helps.

Answer 2

This should work!

 body { padding-bottom: 40px; /*height of the footer*/ } #page-container { position: relative; min-height: 100vh; } .center_div { position: relative; top: 50%; left: 25%; right: 25%; margin-top: -50px; margin-left: -50px; width: 50%; padding-bottom: 40px; } #footer { position: fixed; bottom: 0; left: 0; height: 40px; width: 100%; } 

 <!DOCTYPE html> <html> <head> <title>Experiment Welcome Page</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link href="{{ url_for('static', filename='jspsych.css') }}" rel="stylesheet" type="text/css"> <link href="{{url_for('static', filename='style.css') }}" rel="stylesheet" type="text/css"> <!-- Bootstrap css and other basic formatting --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- Material Design Bootstrap --> <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.9/css/mdb.min.css" rel="stylesheet"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <body> <div id="page-container"> <div class="center_div"> <h1>Cognitive Functions and Risk Assessment Task Prototype</h1> <p>Please enter the number of trials that you would like to have in the following field (any number from 1-100) then click submit</p> <form id="Trial_Form" action="/experiment_app" , method="post"> <input type="number" name="trials" min="1" max="100"> <input type="submit"> </form> <p>Upon clicking submit, the experimental application will be launched. Each trial will display as an interactive page using the JsPsych framework.</p> </div> <footer id="footer" class="page-footer unique-color"> <img src="{{ url_for('static', filename='images/cognew_logo.png')}}"> </footer> </div> </body> <script> $("#Trial_Form").submit(function(event) { alert("ALEEEEEEEEEEEEEERT"); }); </script> </html>