CSS Trick: Center content that is larger than a browser window

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!

Tags: , , , ,

6 Responses to “CSS Trick: Center content that is larger than a browser window”

  1. Boose says:

    It was a great help! Thank you!

  2. This article may be exactly what I’m looking for to develop my own site, but I would like to see the example mentioned. However, the link seem to be dead at this point.

    • Shawn says:

      I will try to find this link when I get home tonight and update it.

      • Hi Shawn, it seem the link is dead for good, but I tried the code anyway and actually managed to make it work. I had to correct the margin-values in parenthesis though, which must be negative as we want the margins to be ouside the browserwindow rather than inside, but then it worked like a charm. I also added some code to get rid of the browser scroll bars.

        If you wish you are welcome to refer to my website as an example of how the code works: http://www.clausmarcuslund.com.

        Thank you for a helpful article :)

  3. Luben Pashov says:

    GENIUS!!! So simple, so effective.

  4. Zachary says:

    After spending about six hours looking for a solution to this I stumbled across this page. Works wonderfully, can’t thank you enough.

Leave a Reply