Centering a Website

<body>
  <div id="page-wrap">
    <!-- all websites HTML here -->
  </div>
</body>
#page-wrap {
     width: 800px;
     margin: 0 auto;
}

Comments

  1. User Avatar
    Eddie Monge
    Permalink to comment#

    You also need to do `

    body {
      text-align: center;
     }
    
    #page-wrap {
      text-align: left;
      width: 800px;
      margin: 0 auto;
    }
    

    As IE won’t always do auto margins.

    • User Avatar
      James
      Permalink to comment#

      Thanks!

      My organization has an older version of IE so the code didn’t work the first go around. Adding the body element worked perfectly!

    • User Avatar
      Merne
      Permalink to comment#

      I know this is old, but you really don’t need text-align: center; unless you’re doing something else wrong.

      IE supports “margin:auto;” if there is a width set to the element, and a valid doctype. Without a valid doctype, IE enters ‘quirks mode’ where auto margins fail.

    • User Avatar
      Jared
      Permalink to comment#

      I know this post was written in 2009 but God bless you!!! I was having to work with a third-party service where I can update the header and footer to their content and only in IE was my page content left justifying.

    • User Avatar
      Ofelia

      thank you!

    • User Avatar
      famau
      Permalink to comment#

      nice one.
      fantastic.

      but how to make sub menu in html with css.
      Please help me.

    • User Avatar
      Surya
      Permalink to comment#

      Excellent answer thank you
      @Eddie Monge

  2. User Avatar
    Maria
    Permalink to comment#

    IE is not ok…

  3. User Avatar
    Κατασκευή Ιστοσελίδων

    Upgrade IE or use mozilla…

    • User Avatar
      David
      Permalink to comment#

      Upgrading IE is not an option for a lot of people. A lot of organisations lock their systems to that software can’t be updated and new software can’t be installed. Fixes for IE generally still need to be included.

    • User Avatar
      Alexander von Gluck
      Permalink to comment#

      Continuing to support IE6/7 by making hacks and workarounds hurts the web industry… you don’t add compatibility stuff for 10-year old Mozilla… do you?

    • User Avatar
      Stephen
      Permalink to comment#

      @Alexander: It’s not possible for some developers to drop support for IE6/7. I’m the front-end dev for an eCom site that still has a double-digit percentage of IE6 users thanks to education and enterprise. It’s a sad reality, but I still have to include IE hacks in my code.

  4. User Avatar
    webby
    Permalink to comment#

    Für den IE Versucht es mal so:

    #page-wrap { 
      position: absolute; 
      left: 50%; 
      width: 800px;
      margin-left: -400px;
    }
    
    • User Avatar
      Kesav
      Permalink to comment#

      Absolute positioning will not be a good solution for complicate websites. The main snippet + (center aligned body)is the best solution

    • User Avatar
      selim
      Permalink to comment#

      this solution solved my form’s alignment problem. Thank you.

  5. User Avatar
    Michi
    Permalink to comment#

    You can also use the
    <pre>
    <center>
    </pre>
    tag at the top of the page.

  6. User Avatar
    Ole
    Permalink to comment#

    Do ist like this:

    #page-wrap {
    width: 800px;
    text-align: center;
    margin: 0 auto;
    }

  7. User Avatar
    Domenico Cannetti
    Permalink to comment#

    *{
    margin:0px;
    padding:0px;
    }

    body {
    text-align:center; /* thi is good */
    }

    #page-wrap {
    width: 800px;
    text-align:left;
    margin: 0 auto;
    }

  8. User Avatar
    Ashish
    Permalink to comment#

    you can use following code, it will run in all browsers properly

  9. User Avatar
    Grays
    Permalink to comment#

    Thanks so much … got it sorted just lacked the word auto!!!

  10. User Avatar
    Σχολες οδηγων Θεσσαλονικη

    Thanks for sharing keep helping us!

  11. User Avatar
    btelis

    very helpfull, thanks for sharing Eddie

  12. User Avatar
    edward

    hi ed…. thanks for this tutorial……!
    actly what i use to face earlier when i use to slice my design in photoshop and export to webpage then the whole page was portrait on the left side of the page, so i think with this code it’s not gonna happen right …………?

  13. User Avatar
    Tosh
    Permalink to comment#

    in old IE’s just use doctype as first page element, exemple:

    and margin:auto will be work

  14. User Avatar
    narkotika
    Permalink to comment#

    Great tutorial for noobs (i am one of the best noobs!)

  15. User Avatar
    κατασκευή ιστοσελίδων

    I made it thnx chris!

  16. User Avatar
    εσωρουχα
    Permalink to comment#

    Love css any guide to learn more???

  17. User Avatar
    Amit Yadav
    Permalink to comment#

    Amazing content/posts/tutorials on this website, you totally rock man!

  18. User Avatar
    Bob
    Permalink to comment#

    Text align center should never be used to position an object. Zeroing out my margins and padding with a wild card is also another poor practice. I would recommend using EricMeyer’s CSS reset. If margin: 0 auto is causing you issues, use:

    #page-wrap {
    position: absolute;
    left: 50%;
    width: 800px;
    margin-left: -400px;
    }

    • User Avatar
      Thor
      Permalink to comment#

      This made sense and worked flawlessly for me. There was also no need for me to change text alignment in the body selector’s css. Thanks Bob.

    • User Avatar
      Nathar Leichoz
      Permalink to comment#

      If you use absolute positioning and the browser window is smaller than the content, it will cause the content to be hidden by the left side of the screen. Try launching IE on a small screen device such as an ATM to find out.

  19. User Avatar
    Κατασκευή ιστοσελίδων
    Permalink to comment#

    and done

  20. User Avatar
    Christopher
    Permalink to comment#

    The tutorial is done correctly people! remember to set your DOCTYPE correctly.

    the best to use would be..

    !DOCTYPE html

  21. User Avatar
    christopher
    Permalink to comment#

    I have used two primary methods for this in the past, but I’ve probably used the latter more often.. method #1, lightweight. . .

    html, body {
    text-align:center;
    width:100%;
    height:100%;
    }
    
    /* original thread code */
    
    #page-wrap {etc..}
    

    and method #2, which should override any problems…

    html, body, {
    text-align:center;
    width:100%;
    height:100%;
    }
    
    #fullpage-div /* usually named container or wrapper */ {
    text-align:center;
    width:100%;
    height:100%;
    } 
    
    /* of course you'd add that div to the html, body style to compress your code, I included it separately here to illustrate the additional container.  */
    
    /* then add the margin 0 auto container which in this case is the original thread code */
    
    #page-wrap {etc..}
    
    

    Whatcha think?

  22. User Avatar
    kosmimata
    Permalink to comment#

    where to learn more???

  23. User Avatar
    co2 effects
    Permalink to comment#

    I have a website build in WordPress.Is this code capable for it?

  24. User Avatar
    Jake
    Permalink to comment#

    *{padding: 0; margin: 0 auto;}
    body{
    text-align: center;
    }
    #page-wrap{
    width: 800px;
    position: relative;
    text-align: left;
    }

  25. User Avatar
    Imtiyaz
    Permalink to comment#

    #page-wrap
    {
    width: 800px;
    margin: auto;
    }

  26. User Avatar
    Zahidul Hossain
    Permalink to comment#

    TRying to work with margin: 0 auto; but dont know i am failing all the time :(

  27. User Avatar
    Hamidjon
    Permalink to comment#

    Moving the world off Internet Explorer 6 –> http://www.ie6countdown.com/

  28. User Avatar
    mohsin
    Permalink to comment#

    {width:960; margin:0 auto;}
    today is best technique

  29. User Avatar
    Cindy
    Permalink to comment#

    I used the following code for my HTML, and CSS stylesheet, and it worked like a charm. My site was actually width 1000, so I just edited to read from 800 to 1000, and at margin-left -400, I changed it to -500 following the format code below.

    For my CSS stylesheet I added the following code:

    page-wrap {

    position: absolute;
    left: 50%;
    width: 800px;
    margin-left: -400px;
    }

    • User Avatar
      Roberto Alves
      Permalink to comment#

      Cindy, I suffer a lot trying to find the solution to my website. Thank you very much for your instruction. Seems that nothing else worked fine to me instead of your html code. I appreciate that. Best regards, Roberto

  30. User Avatar
    budi
    Permalink to comment#

    Thanks for the script. This works for me. I modify the css then I can made the website with 1000px center.

  31. User Avatar
    mohammad reza
    Permalink to comment#

    i use flexbox for web designing and i can’t use width in flexbox so what should I do in css for align body in center?

  32. User Avatar
    Srikanth Palagani
    Permalink to comment#

    Hi i need a solution for one scenario

    i have one div with width 1000px,
    and inside the 1000px div i have one more small div with width 300px , i need place this 300px div exactly center of the 1000px div

    can some one help with sample

    • User Avatar
      mohammad reza
      Permalink to comment#

      maybe u use this code in main div

      {
      margin: 0 auto;
      padding:0;
      }

  33. User Avatar
    James
    Permalink to comment#

    It always depend on what cms we use. I had many problems with old cms that didn’t have this option, but WordPress and Joomla are easy to use.

    • User Avatar
      Deepti Reddy
      Permalink to comment#

      for this type of issues , you need to keep the display:table-cell for that particular main div and make it vertical-align:middle , then automatically if will show exactly in the center

  34. User Avatar
    Kevin
    Permalink to comment#

    I’ve been using the code:
    page-wrap {position: absolute;left: 50%;width: 970px;margin-left: -485px;}

    works fine in browsers but noticed that I have issues when viewing on a mobile – when scrolling the left side navigation disappears for about 30-40px while the right is absolutely fine.

    anyone else had issues?

    website is http://www.teddybearfriends.co.uk/ if anyone wants to take a look

  35. User Avatar
    Chris Tolworthy
    Permalink to comment#

    Kevin

    I had the same problem, and it turns out the reason is fairly straightforward. The best way to center a site is using

    #page-wrap{width: 970px; margin: 0 auto; }

    But this often does not work. So you had to use

    #page-wrap {width:970px; position:absolute;left:50%;margin-left:-485px;}

    Which works on wide screens, but on narrow screens (e.g. mobile devices) it cuts of the left hand edge. The problem with using “margin: 0 auto” is that it conflicts with various “position:absolute” commands. So this should work:

    At present, your html page says

    <div id="fullcontent">

    and defines “fullcontent” in css as

    #fullcontent {position:absolute;top:188px;left:190px;width:770px;z-index:20}

    The trick is to define the “top” part in html as a separate DIV. E.g.

    <div id="new2" style="position:absolute;top:188px;">
    <div id="fullcontent">
    [rest of page]
    </div> [don't forget to close the new div!]

    Then define “fullcontent” in the css file without the “top”, e.g.
    #fullcontent {position:absolute; left:190px;width:770px;z-index:20}

    This should work. Some other parts of the HTML may also be defined as “absolute” so they get left behind: try the same sort of thing. If anything still does not work, experiment with “position:relative” inside the “position:absolute” div. If anything STILL does not work, check if the full page width is set twice: e.g. “fullcontent” defines the page as width:970px (or whatever), and some element inside that wrapper ALSO defines it, which might confuse the browser, causing it to leave tons of space on the right.

    How this helps. I am NOT an expert, so cannot answer any follow on questions, but had the same problem and that seemed to work for me. I know how frustrating it is when all the tech sites say “do this, it’s easy” and you copy the code precisely and it DOES NOT WORK.

    Happy new Year.

    Chris

  36. User Avatar
    omar abdi
    Permalink to comment#

    how to make main div page by using html
    anather div of pages must be inside main div

    by: omar abdi
    address: mogadishu – somalia

  37. User Avatar
    diwakar

    hi
    in css code what is the tag we used to keep the design site to keep in center after zoom-in/zoom-out

  38. User Avatar
    Musthafa

    html,body
    {
    padding:0px;
    margin:0px;

    }
    body
    {
        background-color: #fff;
        font-family:fontone;
    
    }
        .wrap
        {
        width:100%
          margin: 0 auto;
        }
    

    Centering Not working for this

    what to do

  39. User Avatar
    Sotis
    Permalink to comment#

    I need a solution on how we can center text when we have responsive design. My site is going to change on RD and i have tested it but not with 100% solved issues. Thanks

  40. User Avatar
    Rock
    Permalink to comment#

    { margin: 0; padding: 0; }
    #page{display:table;overflow:hidden;margin:0px auto;}
    :first-child+html #page {position:relative;}/ie7*/
    html #page{position:relative;}/ie6/

    #content_container{display:table-cell;vertical-align: middle;}
    :first-child+html #content_container{position:absolute;top:50%;}/ie7/
    * html #content_container{position:absolute;top:50%;}/
    ie6*/

    :first-child+html #content{position:relative;top:-50%;}/ie7/
    * html #content{position:relative;top:-50%;}/
    ie6*/

    html,body{height:100%;}
    #page{height:100%;width:465px;}

  41. User Avatar
    Jyothi
    Permalink to comment#

    Great!

    Thanks

  42. User Avatar
    Paul W.
    Permalink to comment#
    <body>
      <div id="page-wrap">
        <!-- all websites HTML here -->
      </div>
    </body>
    
    #page-wrap {
         width: 800px;
         margin: 0 auto;
    }
    

    Works like a charm. Thanks

  43. User Avatar
    artero
    Permalink to comment#

    all this only centers the webpage horizontally
    HOW do you center the webpage vertically???

  44. User Avatar
    inder
    Permalink to comment#

    actly what i use to face earlier when i use to slice my design in photoshop and export to webpage then the whole page was portrait on the left side of the page, so i think with this code it’s not gonna happen right …………?

  45. User Avatar
    Srinivas
    Permalink to comment#

    Awesome Worked for me :)

  46. User Avatar
    Huy
    Permalink to comment#

    Thank you very much! This worked perfectly to me :)) Learn new things are always awesome!

  47. User Avatar
    Mizan
    Permalink to comment#

    I know it but now it helps me to remember again.

  48. User Avatar
    ZishanAdThandar
    Permalink to comment#

    Thank you very much for this pretty and simple code. Which solve my simple but big problem. Nice work… carry on…

  49. User Avatar
    tareq arar
    Permalink to comment#

    thanks, lots that very helpful

  50. User Avatar
    Seth-666
    Permalink to comment#

    Hello, i am new in html and css … i heard a lot of flexbox… and see here a way to center hole page ,old style …. but isn’t it better to center with flexbox hole website ?

  51. User Avatar
    Onfortheteam
    Permalink to comment#

    I have an issue the website is all centred and I have no issues once I upload the website the preview works but when entering URL it left aligns it please help it is doing my nut in.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag