It is fairly easy to center things in the browser window by using the rule: ‘margin:auto;’ on the containing div. What if you want to center some content that is larger that the browser window? By this, I mean that the item’s center point is inline with the window’s center point, and the excess goes beyond the border of the window equally on all sides. The usual technique won’t work because there is no space for a margin so none is calculated. If what you are trying to center is just a background image, there is also an easy solution, ‘background-position:center;’.
I came across a situation recently where this very problem popped up. The content in question here was a Flash movie, and it was built very large so that the header and footer images would extend to the edge of the window, no matter how large the user had sized their window. Obviously, if this wasn’t centered, the actual content in the middle of the flash movie would be kicked way off to the right, because the left edge of the flash movie is actually the beginning of the pattern.
I took a glance through a book, and did a quick web search, but I didn’t immediately find the information that I was looking for, so I decided to just work it out myself.
It really wasn’t to difficult to make happen, and here is the css that I used to make it happen:
body {
margin:0;
padding:0;
}
#wrapper {
width:(element width);
height:(element height);
margin: (1/2 height) 0 0 (1/2 width);
padding:0;
position:absolute;
left:50%;
top:50%
}
In the HTML, you will need to enclose the content in a div with the id of “wrapper”. You will also need to edit the above css code (anything in parenthesis) to reflect your own sizes. Other than that, everything should work fine. Here is a link to the example I mentioned above, it works dynamically so be sure to resize the window to see the effect.
If you come across this problem, hopefully you will find this solution useful (and easy to find). One word of advise however, this solution does not work in IE6. I may try to find a workaround for this, if so, I will update this post. Then again, I detest that browser, and really don’t care if things are rendered poorly in it, so I may never fix this problem.
Update: This post has been updated and is now compatible with IE6. The problem had to do with ‘position:fixed;’ which should have been set to absolute for IE6 to properly render the negative margins. I had completely forgotten about fixing this, but luckily a reader who preferred not be named found the solution. Unnamed reader, thanks for your help on this, hopefully others get some use out of it as well!
