The Gimcrack Miscellany

How To Easily Center A Web Page

Posted on 13. Aug, 2007 by The Gimcracker in Gimcrackery

I used to try all kinds of sizing techniques and non-xhtml compliant methods. I tried absolutely positioning a div tag by giving it a left:20% and right:20% attribute, but this didn’t work in all browsers (I’m looking your direction, IE). I tried wrapping the whole div tag in a ‘center’ element, but we won’t even go into how many standards that violates.

I finally figured it out, thanks to the genius of Arcsin’s CSS skills, when I was looking at the stylesheet for the very blog you are reading as we speak, or as you read, rather. The blog. As you are currently reading the blog this post is in, as we sit here and speak, during whilst you read it, or something concurrently, visa vie.

Ergo, here is the code. Don’t blink because you’ll miss it, that’s how simple it is.


.container {margin: 0 auto;}


Just put everything inside <div class=”container”></div> and you’re ready to rock and roll. Speaking of rock and roll, did you know Death Cab for Cutie rocks and rolls? I watched a RockDock about them and they go crazy up on stage. I mean they’re really rocking and rolling. You wouldn’t guess it solely by listening to their albums.

P.S. Make sure your container div tag is inside another div tag with attribute text-align:center or this technique won’t work in IE.