I am encountering some unexpected behavior for a task that I thought would be simple. I have two main objectives in mind. Firstly, I want the footer to be displayed at the bottom of the page as an actual footer. Secondly, I need the div with the ".center-div" class to be positioned at the center both vertically and horizontally on the page.
Despite trying CSS solutions found online and hoping for a breakthrough eventually, I have not been able to achieve the desired outcome. I will continue to search for solutions on Google to resolve this issue, as I am puzzled by what might be causing the problem with my code.
Below are the key sections of my HTML code. I am including the CSS CDNs I am utilizing, just to rule out any potential issues stemming from them. Also, please note that this is for 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%;
}The code snippet above provides a glimpse into the structure of my project, complete with the CSS and CDNs used for styling. The main content of the page is contained within the "center_div" div and the footer is at the bottom of the page.
If you wish to view the actual result of this setup, you can click on this screenshot link: https://i.sstatic.net/h7gHw.png
Moreover, you can access a demonstration of my complete HTML and CSS files on this JSFiddle demo link: http://jsfiddle.net/vuz6Lp1d/1/
It's worth noting that the screenshot outcome does not entirely match the rendition in the JSFiddle version. While the footer shows at the top of the page in the screenshot, the "centered" div is somewhat off-center towards the right, lacking the necessary padding on the right side.
Edit 1
The suggested solutions did not yield the desired outcome, prompting me to simplify the approach. Upon closer inspection, I realized that the original code I used was likely incorrect. Despite investing time in troubleshooting and copying solutions from Stack Overflow, the situation did not improve.
It's intriguing how margin: 0 auto; centers the div horizontally but not vertically. Surprisingly, margin: auto 0; does not work at all, causing the div to remain in the top left corner. Here's a screenshot showing the inspect element process with margin: auto 0;: https://i.sstatic.net/IgmKY.png
Consequently, I have settled for using margin: 0 auto; which only vertically centers the <div> element. As a result, the footer now sits at the bottom of the page as expected.
The revised CSS now simply looks like this:
.center-div {
width:800px;
margin: 0 auto;
}