Fully Centered Webpage With Bits of CSS in the Middle

Yes. It’s done, and has been for a while now, I just have never seen anyone post anything about it. I took my cues, originally, from the CSS Zen Garden, but I improved upon their code a bit – or, rather, I increased its scope.

But first, a bit of history. Remember when we were forced to use tables if we wanted to have a webpage that was smaller than the browser window fit centered on the page? If you wanted to use CSS you could, in the beginning, just simply do the math and add the appropriate “margin-left” and make it appear centered. However, that would only work on whatever screen resolution you were designing and testing in (or for) – hardly a solution when it comes to making a site that everyone and their parents can see.

So the hunt began to find an appropriate tool to horizontally center a web page with CSS.

There was the seemingly tried and true method like this:

#Content {
width: 500px;
margin: 0px auto;
}

This would automatically place any div identified as "Content" in the middle of the page, horizontally, with a left and right margin set to "auto" and a top and bottom margin set to "0px". But there was trouble, as this wouldn’t show correctly in most even all browsers.

So the boys at CSS Zen Garden stumbled upon the following. A technique that utilizes negative margins:

First, the CSS:

body {
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#container {
position: absolute;
width: 500px;
left: 50%;
margin-left: -250px;
}

So what's this do? Let’s take it step-by-step. If one were to create a div identified as 'container', it would be positioned at the start at the top left of the page, set as 500px wide, and then its left edge would be positioned 50% in from the left edge of the browser window, then with the 'margin-left' object added, it would then be thrown back left by 50%, but since it's given a numeric value of exactly one half of the container’s width, it is now made fluid. You can see, if you try to resize the browser window, the container div will remain perfectly centered between the left and right edges of the browser window, unless you make the browser window smaller than the container div, and then you’ll get the dreaded horizontal scrollbars.

For the sake of this exercise, I will add a little more to the container id so that it will be seen with the html that appears just below.

#container {
position: absolute;
width: 500px;
left: 50%;
margin-left: -250px;
border: solid 1px #000;
height: 400px;
}

Here's the html to which this css would apply *carrots removed*:

html
body
div id="container" /div
/body
/html

Simple enough, right? Once you plug this html and the CSS into the appropriate areas, you’ll get a 500px by 400px white box with a black border that is horizontally centered at the top of your browser window.

What if you want it to be vertically centered? Glad you asked, my friend.
Here’s where the scope broadens, but it’s not a tough solution by any means. It is simple this: apply the horizontal technique vertically.

Here’s how it’s done:

#container {
position: absolute;
width: 500px;
left: 50%;
margin-left: -250px;
border: solid 1px #000;
height: 400px;
top: 50%;
margin-top: -200px;
}

See how it’s translated from horizontal to vertical.

And that’s how it's done! You get a perfectly vertical and horizontal web page inside a browser window.

Let me know if you have any questions, or see a flaw in the design.
Good luck, duckies...