How To Center Your Website in a Browser
Wednesday, January 16th, 2008Categories: Web Design, Web Development
RSS Comment Feed
Trackback
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. 
need to find out about online food recipes food, visit us
Related Posts
- 10 Tips To Make Your Website’s Layout More Usable
- Making a Favicon.ico
- Testing Your Website On All Versions of IE
July 24th, 2008 at 12:04 pm
Simply brilliant, nice work.
July 24th, 2008 at 12:11 pm
Thank you Quinton.
February 5th, 2009 at 3:31 pm
where in the html do I paste the table?
February 5th, 2009 at 3:52 pm
That will work as the only contents of the BODY tag.
September 1st, 2009 at 9:54 pm
Hi
I made the website using templates. in the editable regions i have tables which has layers on it. all the layers are misplaced. it jumps out of table. what should i do . can you please reply on my e-mai
September 2nd, 2009 at 9:40 pm
Hi. I’m having trouble centering my pages horizontally when the screen is maximized. I designed for a medium resolution and can’t seem to figure out how to get rid of my static margins in order to implement your example. If you could help me with one page. the same solution should work for the rest. I’m not using a style sheet.
Welcome to the Farm!
A:hover {color: #FF0000; font-weight: bold}
Great Days Happen at the Farm!
4150
Broad St. Rd.
Gum Spring, VA 23065
Tommy@woodnracket.org
804.397.0215
Clay
Courts
Grass Courts
Lake
Lodge
Squash
Trails
June 9th, 2010 at 9:35 am
You’re my hero. I was looking for a solution for ages, but this simple CSS did the trick! Thank you!
July 12th, 2010 at 1:36 am
Thanks. I couldn’t continue without this feature.
November 19th, 2010 at 2:10 am
Nice,
It is a good way to center
width:800px;
margin:0px auto;
Here are another few ways to align center http://www.templatespoint.com/blog/2009/06/how-to-center-main-div/
February 26th, 2011 at 4:53 pm
Thank you! I have been trying to center my website for quite a while and did not understand how to do it until I found your tip and it worked! That is one of many website design problems I can scratch off my list.
January 29th, 2012 at 5:15 am
Thank you for any other fantastic post. Where else may anybody get that kind of information in such a perfect means of writing? I have a presentation subsequent week, and I am on the look for such information.