Code Snippet

Home » Code Snippets » CSS » Centering a Website

Centering a Website

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

Subscribe to The Thread

  1. Eddie Monge

    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.

    Reply ↓
    • James

      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!

  2. Maria

    IE is not ok…

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

    Upgrade IE or use mozilla…

    Reply ↓
    • David

      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

      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?

    • Stephen

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

    Für den IE Versucht es mal so:

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

    Reply ↓
    • Kesav

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

  5. Michi

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

    Reply ↓
  6. Ole

    Do ist like this:

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

    Reply ↓
  7. Domenico Cannetti

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

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

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

    Reply ↓
  8. Ashish

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

    Reply ↓
  9. φωτοβολταικα

    in safari i have a problem with the code…

    Reply ↓
  10. Κοσμήματα - Ρολόγια

    safari is ok for me

    Reply ↓
  11. Grays

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

    Reply ↓
  12. Σχολες οδηγων Θεσσαλονικη

    Thanks for sharing keep helping us!

    Reply ↓
  13. btelis

    very helpfull, thanks for sharing Eddie

    Reply ↓
  14. 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 …………?

    Reply ↓
  15. Tosh

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

    …

    and margin:auto will be work

    Reply ↓
  16. narkotika

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

    Reply ↓
  17. κατασκευή ιστοσελίδων

    I made it thnx chris!

    Reply ↓
  18. φωτοβολταικα συστηματα

    It is the same in php and html?

    Reply ↓
  19. εσωρουχα

    Love css any guide to learn more???

    Reply ↓
  20. Amit Yadav

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

    Reply ↓
  21. Bob

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

    Reply ↓
    • Thor

      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.

  22. Κατασκευή ιστοσελίδων

    i think the best way is

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

    Reply ↓
  23. Κατασκευή ιστοσελίδων

    and done

    Reply ↓
  24. Christopher

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

    the best to use would be..

    !DOCTYPE html

    Reply ↓
  25. christopher

    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?

    Reply ↓
  26. kosmimata

    where to learn more???

    Reply ↓
  27. co2 effects

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

    Reply ↓
  28. ανταλλακτικά αυτοκινήτων

    Lot of programs have automatic centering, wordpress dosnt?

    Reply ↓
  29. Jake

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

    Reply ↓
  30. Imtiyaz

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

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~