How To Center Your Website in a Browser

If you’re like me and you’ve tackled micro-sites or webpages that you want to have centered horizontally and vertically in a browser, you might have noticed that it’s difficult to get it to work in all browsers. Typically, the solution I’ve seen is to have hard returns at the top of your site until it’s vertically centered. That doesn’t bode well with huge screen resolutions or small screen resolutions.

You can see the demo on this page. Feel free to resize and manipulate the browser, the content will always be centered.

I have a simple solution that I’ve used on my portfolio that uses valid CSS and valid XHTML (it validates according to w3c).

Stylesheet

In the demo, I didn’t bother making the CSS a different file, but here is the ultra simple code that you need:

<style type=”text/css”>
html, body, #wrapper {margin:0;padding:0;height:100%;text-align:center;}
#wrapper {margin:0 auto;vertical-align:middle;width:250px;}
</style>

Remember, if you’re sticking it in a stylesheet, be sure to remove the style tags.

HTML

The solution uses a simple table. I was unable to get a non-table solution to work.

<table id=”wrapper”><tr><td>I am centered.</td></tr></table>

Remember, you still need all the other html tags.

Final Product

Using those simple lines of code and the usual HTML markup, you see that the text is centered in the demo provided.

That’s all for now, hope I helped.

Related Posts

• 10 Tips To Make Your Website’s Layout More Usable
• Testing Your Website On All Versions of IE
• Making a Favicon.ico