Question

here is basically my html structure the content section is the part which i want centred between the header and footer so that on all resolutions its in the middle. I have tried using the table method where you put a div around the section with display:table and then set the content section as display:table-cell; vertical-align:middle; but it seems to affect the positioning of divs/sections within the content and positions the section top left of the screen ontop of the header element which has position:absolute;.

<header>
</header>
<section id="container">
<section id="content">
</section>
</section>
<footer>
</footer>

Answer 1

Let’s assume this:

div {width: 300px; height: 200px;}

you can add:

div {position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -150px;}

It’s good practice to put a “wrap” around all elements inside of the body tag.

Let me know how that works for you.