Grow your CSS skills. Land your dream job.

Last updated on:

Centering a Website

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

Comments

  1. 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.

    • 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!

    • 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.

  2. Permalink to comment#

    IE is not ok…

    • 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.

    • 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?

    • @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.

  3. webby
    Permalink to comment#

    Für den IE Versucht es mal so:

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

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

  4. Permalink to comment#

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

  5. Ole
    Permalink to comment#

    Do ist like this:

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

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

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

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

  7. Permalink to comment#

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

  8. Grays
    Permalink to comment#

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

  9. Thanks for sharing keep helping us!

  10. very helpfull, thanks for sharing Eddie

  11. 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 …………?

  12. Tosh
    Permalink to comment#

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

    and margin:auto will be work

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

  14. Love css any guide to learn more???

  15. Permalink to comment#

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

  16. 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;
    }

    • 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.

    • 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.

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

    the best to use would be..

    !DOCTYPE html

  18. 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?

  19. Permalink to comment#

    where to learn more???

  20. co2 effects
    Permalink to comment#

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

  21. Jake
    Permalink to comment#

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

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

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

  24. Hamidjon
    Permalink to comment#

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

  25. mohsin
    Permalink to comment#

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

  26. 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;
    }

  27. Permalink to comment#

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

  28. 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?

  29. 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

    • mohammad reza
      Permalink to comment#

      maybe u use this code in main div

      {
      margin: 0 auto;
      padding:0;
      }

  30. 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.

    • 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

  31. 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

  32. 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

  33. 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

  34. 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

  35. 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

  36. 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

  37. 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;}

  38. Jyothi
    Permalink to comment#

    Great!

    Thanks

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".