Horizontally Center Your Website Structure Using CSS
Every web programmer knows that you can't code a commercial website for a specific browsers or user experience level, much less a screen resolution. Since you can't count on a user having the latest and greatest, you need to use the lowest common denominator of browsers resolution. In today's web world, 1024x768 is usually the lowest browser resolution coded for.
I prefer to create my websites using a fixed width so that I can have complete control over the website layout. A fixed width website looks the same in all browsers which can prevent users with extremely large or small resolutions from experiencing layout issues. Instead of simply allowing the website to align completely left on the screen (resulting in high-resolution users seeing your website take up only half their screen), I center the site. This is a very simple task.
Step One: HTML
Declare a DOCTYPE. Create an initial "wrap" DIV that will be the website's wrapper.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>My Site</title> </head> <body> <div id="wrap"> <!-- WEBSITE GOES HERE --> </div> </body> </html>
Step Two: CSS
Declare the wrap ID -- you MUST declare a width (otherwise, how would you center it?) Use left and right margins of "auto."
/* "auto" makes the left and right margins center the wrapper */
#wrap {
width: 900px;
margin: 0 auto;
}
That's It?
Yes! Centering your website is that easy. This website currently uses this layout. Does my website take up most of your screen? That means you have a low browser resolution.
Great site. I thought I was a great web designer but I’ve realized there’s a lot more to learn. Thanx.
But here’s a tip from me (I guess you already know it but some of your readers might not):
html { height: 100%; margin-bottom: 0.01em; }Add this to your style to always have a scroll on the page. Otherwise the centered div will jump when switching from a page with a scroll to a page without. The width of the page is dependant of whether there is a scroll on a page or not.
Where do you place this code?? I can’t figure it out thanks :)
Hi!
I never really got my head out of the fixed layout world handed to us by the printing industry. I’m not able to realise a design for this new internet web based medium – so instead I’ll carry on pretending I’m using paper and ink. Hard luck if you’ve got a 1900×1280 wide screen, or an older 800×600 set-up eh?
To be fair, I shouldn’t really claim to be a web designer because I’m not really designing for the web.
That’s pretty old news…
http://www.simplebits.com/notebook/2004/09/08/centering.html
@Martin: Thank you for sharing. I always do notice the scrollbar “jump” in FireFox but it’s never been a standard in our web shop to do anything with it. I do agree that it could make the site smoother.
@Tim: I don’t try to set the world on fire with every post. When I view my web stats (Google Analytics), I see keywords for what people are looking for to get to my site. I saw a fair amount of keywords that related to centering a website, so I decided to create this post. If you look at the “About Me” section, part of the goal of this website is to save people time with quick tidbits — that’s exactly what this is.
Not working!
I tried to put in the code and it was going well till stage 2, but you give no indication where to place the code.. (I guess you assumed it’s obvious)
I’ll keep looking
This needs to be done in a .css file, you need to make a css file and then link said css file to the actual html document.
Alternatively, within the HTML file, place this within the tags of like so:
#wrap { width: 900px; margin: 0 auto; }It is really nice to reminded of these small bits of useful code. Keep it up!
Hi David,
Woah. This post is from the future =).
Very nice simple trick for centering, I’d say 90% of every site I’ve ever designed uses this. It is good that you pointed out that DOCTYPE, this trick doesn’t work unless you have that properly declared.
Nice tip David. Thanks for sharing this with us. Savvy designers probably know it already, but less experienced developers like myself certainly appreciate tips like this. Please keep up the good work. Thanks also to Martin for his tip to prevent page jumping!
FYI, this won’t work for IE6 and below in quirks mode. You need to add a text-align: center to the body and a text-align: left to your container.
I agree with what has already been said, as we develop as web designers we can soon forget the simple little tricks we used to use because we found some new more complicated designery way of doing the same thing. It’s can be good to get back to basics…..
As a programmer, I use this daily and don’t really think much of it. Quite frankly, I’m surprised the article has been so highly viewed. CSS is clearly the bridge between programmers and designers.
Here is another quick fix for the scroll bar issue…
html { overflow-y:scroll; }Hi David,
Thank you for this tip. I have used it loads of time before, but this time when I came to use it, I just had that one thing missing… the width of the wrapper class.
R
This was a very useful article. Thank you.
Thanks for the additional comments too.
Thanks a lot man, I’ve been trying to figure this out for quite some time but other articles never really got to the point. I am happy that you were able to help me out efficiently and quickly.
Regardless of what anyone may say, keep it up for sure. And I’ll be sure to keep this site and you in reference if I have any questions pertaining to css, html layouts.
I can not get this to work. It looks so simple, but it still doesn’t work for me? Can someone e-mail me a fix? I don’t know how long it will be till I come back here :(
P.S. email is tsteuwer @ gmail dot com
Do you have a link to your page Troy? If so, we can take a look and make suggestions.
Regarding centering a site structure using css and wrap:
I have some external css links as well. They seem to negate the centering that you describe above. How do I use external links, either in conjunction or exclusively, with this wrap procedure?
Thanks again,
Jeff
Below is the code for a page I created using CSS and multiple and classes (sorry, I’m in the process changing them to ids). I was able to center the structure but all the divs don’t seem to fit correctly. How do I position within the wrap ID?
@Jeff: Could you provide an example URL? It would make answering your question a lot easier.
I’m really new to css and was wondering if you could help me out.
Is there a way to do this with the background as well so that the background follows the page?
I’ve centered my background with ‘background-position: center’, but lets say my page is 1000px in width. If I shrink the page to below 1000px
the background will shrink from the outside in but my page shrinks from the bottom right, so then my background ends up not matching the page.
Thanks,
dan
@Dan: Can you provide a sample page? I’m not quite understanding your question. Thanks!
@Jeff: Can you send me a sample page URL? Thanks.
Hi David i really thank u for the kind of information u have given, i t is so useful to me. THANK YOU once again. I just want to keep in touch with you, can u please reply to my mail id.
Hi David. I came across this and it worked out great; for Firefox. The page is still naturally aligned left for some reason in Internet Explorer. If you could reply to this as soon as possible, it would be much appreciated.
EDIT: Nevermind; problem solved. (:
@James: To be completely honest, I have no idea what you’re asking me. Please provide a URL.
Hey again Dave! I finally got a web hosting server and so glad I can get some worldwide feedback. I along with the rest of us appreciate what you are doing here and hope good things will happen to you.
The url I just made is http://www.bargain4clothing.com
*From looking at page source, i used a different method of centering. I think your method is more professional, thats why I think I should delete mine and use yours.
*My method can only center images, not layers. I would like to know how to center them without using absolute positioning.
Hopefully you can help and hopefully it will turn out greato!
Thanks again so much and have a great day!
Awesome! I have been looking for this code for quite some time. Thanks a bunch!
This code isn’t working in Internet Explorer. It shoves the whole page to the right instead of centering it.
It does how ever work fine in Firefox and Safari.
What I can I do to fix it?
Well never mind!!
HERES A TIP IF YOU ARE HAVING PROBLEMS WITH IE
if the doctype is not set to XHTML, IE6 and 7 both seem to have issues centering it. If that is the case simply add a “text-align:center;” to the BODY and a “text-align:left;” to the wrapper (to counter act the inherited text-alignment of the BODY).
Maybe this was said in some other way previously, but I have no problems with redundancy. Great stuff! thanks!
Hey david
this site is awesomee!!!
n this was exactly wat i needed
i dint try it yet , i thought u could take a look at the site n help me
the page has abbsolute positioned objects
it is fine in browsers of a normal desktop pc
but in widescreen laptops it is to the left
so i think this code is the right thing as i just learnt css
hope u take a look at the site and if its not too much trouble i hav some problem wit my menu in which i used thee hover option i know its not supported i IE6 but in IE7 the drp downs go berserk so i hope u can help me wit tht.
thanks a lott if its posibble mail me at hameed.ansari@hotmail.com
Thanks! In two minutes this CSS solved what was taking me hours to figure out.
Learn how to size your text and your website layout in em instead. :) It’s poor practice to force an user to use the text sizes you specify because some users may well need to have larger text if their eyesight is failing or they have some other eye problem. It’s off-putting to them.
Hi
I have managed to center in ie7 but firefox and google chrome elude me i have also centered in ie6 but there i have other issues i hate ie6 i have posted the relevant code below if you could tell me what to do i would be very happy thanks already for getting me this close its been driving me nuts.
The site i am working on is http://www.portugalmidlands.com
relevant styles are
body { background-color: #000000; text-align: center; } .wrap { width:980px; margin-left: 0 auto; margin-right: 0 auto; text-align:left; } .leftcolumn { background-color:#ffffff; border: 1px solid #cc0000; padding: 10px; width: 230px; float: left; font-family: georgia; font-size: 12px; color: #000000; text-decoration: none; text-align: justify; position: relative ; } .centrecolumn { background-color:#ffffff; width:670px; font-family: georgia; font-size: 12px; color: #000000; text-decoration: none; text-align: justify; padding: 20px; position: relative; margin-left: 260px; }@Paul: This is what it should be:
.wrap { width:980px; margin: 0 auto; text-align:left; }
Hi Walsh, I have an inquiry. What about if you used a photo imaging software to design your site and it is basically a bunch of “absolute positioned” images that somehow are always positioned all the way to the right when interpreted by a browser. I have a tired a lot of different ideas, but none so far work. I don’t really want to start again from scratch. I am not a coder either so a lot of this css or html is greek to me.
Maybe you could look at my site and give me some advice on what can be done about centering the page. http://www.bengonsioroski.com
Thanks for your time,
Ben
david you rock my world : )
love your work!
THANK YOU!!! I’m used to using Dreamweaver CS3, but only had access to Dreamweaver 8 to do my portfolio site. I was so frustrated about not being able to figure out where “site properties” was & why my page would not center. I finally searched “centering using CSS” & came across this blog on my first search. I’m so glad. It was SO easy to fix my site! I’m uploading it right now! Thanks! :-D
Thank you David!! it helped me =P
David,
Thanks a ton!! I tried your CSS centering technique and it worked like a charm. Two questions:
I hear that to make it work with older versions of IE it is necessary to add some workaround code involving some text alignment stuff. Being something of a newbie, would you be willing to give us that code and exactly where it gets plugged into your centering example?
To make my website stand out I would like to set a background color, probably black, for the wrapper. How can I do that?
With much thanks for you help to all of us!
Clay
David, sorry about the URL typo. Likely you would have caught it, but if not see above.
Clay
THANK YOU SO MUCH. I’m just breaking into web development and this help out GREATLY.
again thanks
im trying to use your code for my website. im very new to web design and im still working on my first site. i don’t have it uploaded yet so im still pulling it out of a folder on my computer, but it won’t center with the code up above. will it only work when it’s uploaded?
hello
i am trying your example code to center my website but it’s not working. can someone please have a look at my code and see what i should be adding or taking out at http://www.gracefullearning.com/index.html. i tried changing my DOCTYPE to be exactly like yours but then my images jumped all over the place, so i had to put back my original DOCTYPE.
ps: can you please example in simple dummy terms as i didn’t write my original code it was generated from a free website design program.
thanks
grace mrspuff@gmail.com
Hi, thanks for the info.. I found that wrapping /putting in a container a lot on the internet. But that means I can’t use position:absolute with that (obviously)..
@tk maybe that’s your problem too
so i can’t position the images and text right.. i started css and always used position:absolute.. cause that’s how I can control the layout to the very last point… so i don’t get it… when you center how can you still put e.g. the menu on the left hand side and the content on the right… i don’t want to do relative positioning like
div.menu{ height:200px; ...}anddiv.content{top: -200px;...}to get to the top again…I tried to read myself through code of websites.. but they use either a lot of script or are way too confusing… is there an easy way ?
I probably am a lost cause… but if you have a simple way to explain.. or a link where I could find sth. I’d really appreciate it.
Hi using position absolute for your whole page really is a non starter it should be used as a last resort and you can position everything to the pixel using css anyway the only thing i use css for is the drop down menus.
@david: No more messing with div wrappers! Thanks!
Hey! Thank you so much for this. I am an eigth grader working at a project based school called Valley New School. We are able to choose our own projects to work on and I have alwyas been interested in HTML and CSS so I started making an add on to our website and I went on a widescreened computer and the thing blew up, but after using this and doing a little tweaking I love it! Thanks so much again!
@Chris Coyier: Hi Chris, Perhaps you can help me. I’d greatly appreciate it. Aside from the obvious, what is the difference between….
and…
I’m not sure when I should use what.
What is the difference between…
DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”
“http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd”
When should I use either? Greatly appreciated if you could help.
So helpful. I am not a schooled programmer or designer, but found myself in the position where to cut costs I have to do it myself. Thanks so much. Just what I needed.
I’m using IE and like all the other codes I’ve been trying this code only works on the left margin. The right margin doesn’t change (The page just stretches to make room for the text insteadof putting in lines).
Any ideas??
@david: Can you look at my site and tell me how to center it? I purchased the template and can’t figure it out. I tried inserting the wrappers, but don’t know how/where to declare “wrap”. Thanks.
Thank you so much!! This was exactly what I needed and it was very simple to do!
Many thanks!!! :)
David!
God Bless you!!
Three sleepless nights trying to figure out everything possible in CSS… then finally tried to search search engine for answers…
So I feel very lucky today!
Thank you so much. It’s really very easy… when you know it. :))
Warm wishes from Russia.
Regards,
Liana
Duuuuuuuuuuuuuude!
Big thanks to you!!! I was ready to punch my keyboard in the left ventricle until I found this.
XD
Hi everyone (and David! :)
I have centered the pages allright.. but now I have a “little” problem:
all pop-up windows now look bad. I mean, chat window, message window, etc.
Earlier, all their contents fit nicely inside of the popup box. Now – it’s all goes by specified global settings, 1024 pixels.
Popup boxes remained the same size, I’m talking about their contents only – they all spread up within 1024px, centered.
Any idea how to fix it?
(and I’m not a programmer, just a person with some brain; so plain English is greatly appreciated)))
Thank you!
I have tried everything to center my website http://www.mytiedyes.com is there any way that you guys can help me. I built the site from scratch using notepad and Firefox with the free XHTML and CSS lessons from the W3C. I’m sure I have some sort of conflict going on but I can’t seem to find it. Peace.
Ok – that answered by question on how to center a website correctly.
I solved my problem by starting a site in a WYSIWYG site designer that I set up the initial page properties to be centered. I then located the snippet of code that centered the page I created and pasted it into my already existing pages right after the head. Put in the closing tags and “BAM!”…centered every page on the site. Now I can move onto version 2.1 for my site(and keep on studying). Peace.
I have done this coding exactly as you say, yet in internet Explorer my site will not center..
I have validated my coding and css and no errors appear, yet it still will not center.. could you help me as to why?
THANK YOU THANK YOU! I am used to working with Joomla CMS based sites, so when a facelift to a pure HTML site was thrown my way, this was JUST what I was looking for. Awwweeesomeeee!
Thanks. I added the code plus the part in a comment to always show scroll bar into a page, here: http://other.kcmartz.com/center-site.txt
thanks!!
Hi,
Thanks for this codes. One thing, can you please tell me where to put the wrap? I don’t where to put it… I am using html.
Thanks a bunch!
Janey
Hey, thanks for the css, it’s working well. The only thing I’m having trouble with is that the “#wrap” is about ten pixels from the top of the page and even if I specify “top:0px”; it won’t start right at the top. I’m sure it’s a quick fix, but I can’t figure it out – can you, or anyone else, help me with this?
Thanks!
-Demara
wow I did wrap everything in code not code tags but it didn’t show,
sorry folks, guess you need to more than HTML,CSS, or javaScript to post here.
I am not versed in PHP etc.
soo thanks all
bye now
Many thanks, David. The center trick works so well … I have been searching for this and your post is great help. Thanks again!
my suggestion is:
#center { position:absolute; left:50%; margin-left:-800px; /* here put the width of your site */ }cheers!
There are regularly changes on the web. I can’t predict which should transpire tomorrow. No crystal ball right here.
Hi just wanted to give you a quick heads up and let you know a few of the pictures aren’t loading correctly. I’m not sure why but I think its a linking issue. I’ve tried it in two different web browsers and both show the same outcome.
So i understand the code for centering and it works… unless I put a second ap div box inside of the centering div box. for example
and in ‘div1’ I have formatting coordinates. but then the div1 doesn’t respond to the wrap div. Why isn’t this working for me?
Thanks in advance
Awesome!! Tried a lot of complex stuff which ended up with no results.. This worked perfect!! Thank You :)
Hello,
I am having difficulty aligning my website correctly. The problem is that I have set up margins for the div tags and the auto margin doesn’t work. Is there an easy solution to fix this issue.
Below is the link to the website.
http://grabbanddurando.com/gdpublic/
This won’t work properly in certain browser, with IE being one. To make it work you must add
body { text-align:center; }together with the above….
(sorry, didn’t see the code tag….)
This won’t work properly in certain browser, with IE being one. To make it work you must add
body
{
text-align:center;
}
together with the above….
I just wanted to give my extreme thanks to the author of this article. I am new to CSS and am trying to learn on my own. I have been trying to figure out the positioning of my site for multiple hours and you saved my life! THANKS AGAIN!!!!!!!!!!!!!!!!!!!!!!
hi guys if its doesn’t work here is what i used to get it to work:
#wrap {
max-width: "urwidth"px;
margin: 0 auto;
position: relative;
}
Hi David, I had a question on the website centering process. I successfully changed the background of the page to black by the #000000 code which was the first step in the process. Now I need to take my 600 x 800 site and make it centered on the browser. All text and images were created and sliced in photoshop and no text was created in Dreamweaver. All I did in Dreamweaver is transfer complete slices on html from Photoshop, add links to each image that needed them, change the browser background to black and now to center the website. It’s all HTML, I’m not sure which one Dreamweaver defaulted to when I used the sliced html site.
Should I copy and paste all code to a new type of HTML document like XHTML 1.0 Transitional, is there a preference?
Ultimately, I want to just have my already configured website be the same dimensions, but be centered on all browsers with background color black.
What should I do?
Thank you,
Chase
I’m not sure if anyone else mentioned this but sometimes the ID won’t be called wrap if you’re looking through a premade boilerplate type theme. Just look for an ID that is directly below the body element.
I can’t get the centering thing to work. I don’t where to put the “Step Two” CSS. I read through all the comments and tried this and that. Nothing worked. Can you help me? My website is http://theoldjazz.com/index.htm. Thanks.
Hi David, many thanks in advance. Please please help me:( I tried to do this with my html/css file, but I could only get my banner centered, nothing else moved. I’m still learning, thanks much for your time!
Hi David – So glad to have found your site. I don’t know alot about html/code – just enough to be dangerous! I am currently using Weebly while I learn html, and am having an awful time with this site! Weebly has TERRIBLE support and so far even they can’t tell me why my site is off centered. I’m afraid to change too much in the code so as not to go past the “point of no return”; however, I desperately need help in centering the page AND the logo at the top. If you would be so kind as to help me, I would so appreciate it. Please tell me what you need to see in order to help me figure this out, and I will send you a screen shot.
Thanks in advance,
Lisa T.
N.C.
Hi David,
I’m a newbie in HTML and have for as far as the above site. I need to change a lot of it to make it more easy on the eye, but at the moment, all I want to do is centre the home page. Can you help, please?
Great site, by the way. Almost every question and answer adds to my knowledge!
Mike
This site deserves a bookmark! Great tutorial indeed!!
Thanks
Thank you very much, This was exactly what I was looking for and it was pretty simple to do, Nice one
Many thanks
I think wrapping the main div with padding is good because if the window gets small the inner content can look crappy if you didn’t think to wrap the inner content in padding.
#wrap {
width: 1000px;
margin: 0 auto;
padding: 30px;
}
Hi all,
Before I completely tear my hair out,would some kind soul put me out of my misery and answer the question that lots of folks have asked but no-one has replied to…..
…Where does the second bit of coding go???
I’ve tried it in multiple places but my page is still stubbornly sitting on the left. I haven’t uploaded the site yet, so don’t have a page to view unfortunately.
Please help a (rapidly!) aging and not-very-good coder to get this darn site finished!!
Many thanks
Ann
#wrap { width: 100%; margin: 0 auto; }Why it’s not work when I try to make a responsive email template… If I use width: 100px or more.. Its works… But when use % .. Its not work!
Ann, the second bit of coding goes in your CSS, or Cascading Style Sheets. This can be a separate page, or in your “head”. If you are new to programming websites, try in your “head” first. So: whatever your page is called #wrap {
width: 900px;
margin: 0 auto;
}
then your body tabs etc.
Sorry, i forgot that it would make the code dissapear. Just look at this website.http://www.w3schools.com/css/css_howto.asp
Thanks David. Very useful and easy to do! Yan
Thanks! I really needed this, surprised to see it is so easy :O
This is not working for me, unfortunately. I was using in HTML to center an entire page and now I’m trying to do it the right way using CSS. On your website, if you change the width of the browser window, everything on the page shrinks down to that width without altering your layout of making text run outside of their containers. How is this possible with a fixed width “wrap”?
I’ve followed your instructions and the “wrap” container is centered on the page but it stays the same width when I resize the width of the browser window. And now I cannot seem to get anything else centered within the page when using centered everything.
I am having issues with this. Everything inside the wrap is now XXXpx wide including images that are only 100px. The image shows correctly but there is an invisible bar that stretches out and causes a scroll bar on my website. Any help?
I can’t seem to get it right. I have a template of dreamweaver that has it in, and that works. However in my own coded part it won’t. Any common mistakes made in this that I could try?
Hello I have been trying to find out how I can center my website when the view resizes the window or minimizes it vary much like this one does. At this point my site will just crop the edge after a width witch is ok, but it would be nice to have the window center when it dose it or even resize the body so it fits to the window no matter what the content size is.
How would I do this?
I have been getting a lot of code and styling it to my liking from
http://www.w3sechools.com but I just am not seeing what I need.
Thank you for your advice, but it doesn’t work for me. Not your fault because I have found similar advice in a number of places and books.
I am migrating to a new computer and subscribed to Dreamweaver CC 2015 for one year to sort out my old websites. After weeks of trying to get the old JT’s Web Site page to center in the browser I came across your post and it must have inspired me to be adventurous so I tried various things to no avail and finally I decided to incorporate the separate div tag into the body tag – . Voila! It worked.
By the way, I called it #wrapper instead of #wrap because I have another bit of CSS I found tonight –
p.no-wrap { clear: both; }which is used on JT’s Web Site home page to get the image floats and text to flow the way I wanted.
So thanks for the inspiration
Just an extra note. Today I found that all I needed to do was add a line of code to the body css – margin: 0 auto; and the page was centered. I also found that Dreamweaver did this automatically when I created my main home page and other pages 10 years ago. Dreamweaver also added text-align:center; for the benefit of old IE browsers.