CSS Centering – fun for all!

Date: 8 November 2003
Author: Russ Weakley

How do you center a containing block on a page using CSS? There are two main methods and the choice should be made based on whether your page layout is liquid (will move in and out depending on the size of the browser window) or fixed width.

Centering liquid layouts

Liquid layouts are easy to center using margins on each side of the containing box. The margins can be set with em, pixel or percentage units.

.container
{
	margin-left: 10%;
	margin-right: 10%;
}

Centering fixed-width layouts

Theoretically, you should be able to apply auto margins to the left and right of the containing block and it should center on the page.

The W3C Visual formatting model states: “If both ‘margin-left’ and ‘margin-right’ are ‘auto’, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.”

So, a containing block should be able to be centered using the following rules:

.container
{
	margin-left: auto;
	margin-right: auto;
	width: 50em;
}

Or, a shorthand version using the margin property:

.container
{
	margin: 0 auto;
	width: 50em;
}

Problems

Some browsers do not center the containing blocks using this method as they ignore the auto margins. These browsers include:

  • NN4 (Mac and Win)
  • Win/IE4
  • Win/IE5
  • Win/IE5.5
  • Win/IE6 (when in quirks-mode)

By adding two simple rules, this problem can be overcome in all of the browsers mentioned above, excluding NN4.

1. Center the body

While these browsers ignore auto margins, they will follow “text-align: center”. If this is applied to the body, the containing block will center correctly. So, a new rule is added:

body
{
	text-align: center;
}

.container
{
	margin-left: auto;
	margin-right: auto;
	width: 50em;
}

2. Resetting text-align

The only problem with this new rule is that all content on the page is now center-aligned. To overcome the center alignment problem, a new declaration is added within the containing block rule set – “text-align: left”. The final CSS code is:

body
{
	text-align: center;
}

.container
{
	margin-left: auto;
	margin-right: auto;
	width: 50em;
	text-align: left;
}

Forcing scroll bars

Update: 17 October 2010: Centering the container in the browser window can sometimes cause problems when moving from long pages to short pages. Long pages may have vertical scroll bars while short pages may not. This can be fixed by adding the following rule – which will add a vertical scroll bar to all pages regardless of their length.

html { overflow-y: scroll; }

Translations

Comments so far

  1. Ugur Eskici says:

    So so so thanks :) im searching for an hours how can i center to my main div; because im starting new to css. Thanks again.
    Cheers

  2. robert says:

    thx, had the same problem. to easy in the end!!

  3. adri says:

    Thank you, so easy to understand!

  4. Jacob says:

    Thanks, I was needing the margins code and it works great thanks!

  5. Tad says:

    Thank you. The 2.0 web has lots of features which aren’t supported by these old browsers.

  6. Bidouz says:

    I would suggest an easy one:

    width: 50%
    float: right

    Cheers

  7. Hamlet says:

    Great and EASY and useful article.

    thanks,

    Ham

  8. Ty says:

    Is there a cross-browser way to center an element vertically in a liquid layout?

  9. ANgelica says:

    Thank you very much, I hope you make a tutorial about positioning the footer on the bottom of a page, not like the one that sticks on the screen?

    thanks

  10. Russ says:

    @Ty. This article explains vertical centering very well: http://www.vdotmedia.com/blog/vertically-center-content-with-css/

    @ANgelica: Tryi this article on “sticky footers” – or footers that stay with the viewport rather than sitting at the bottom of the content:
    http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

  11. [...] CSS Centering – fun for all! [...]

  12. Newbie says:

    Wow, thanks. its give me usefull information. but i hate IE a lot

  13. Brian says:

    Making the div display like a table seems to allow the auto left/right margins to work (tested IE 8 & Firefox 3.5).

    Foo

    It also doesn’t default to 100% width that way.

  14. Brian says:

    ugh … didn’t show code. oh, well, just “display:table” style.

  15. Russ says:

    Hi Brian,

    Yes, there are a range of different methods for centering. The problem with “display: table” is that it is not supported by IE5, 6 or 7:

    http://www.quirksmode.org/css/display.html

  16. RS says:

    if you want to center an image, you have to add this too:

    display: block

  17. We are working on a client’s website and he wanted to center the site (as his is aligned left), plus do some other development stuff and I was researching various methods for doing this; your website came up number one on the web for the search term:

    div#container
    {
    margin-left: auto;
    margin-right: auto;
    width: 50em;
    }

    LOL

    Good job!

    Thanks for the help guys, much appreciated.

  18. Kak Abbas says:

    Thanks ! It’s help me a lot

  19. Slovnyk says:

    Thanks! I’ve started to hate IE – so many things are needed to be done to force it behave like other normal browsers! At first decided that I’ll not to my site for IE at all – however, 30% of users still use it. Heh, have to cope with this task. Thanks for helping me! :)

  20. sng says:

    A very simple and elegant solution

  21. krishnapriya says:

    Thanks. That helped me a lot.

  22. Kaitora says:

    Thanks for the tutorial. It’s the method that has worked best for me so far.

  23. David Orr says:

    Just a note. If you put width: XXem;
    in the body element of the CSS, the page will not be centered, even if you also have this attribute in the container element.

  24. ali pourhiedar says:

    thanks , very good

  25. lsendoya says:

    It is crucial to remember that, for this particular approach to work, the width MUST be defined, either in absolute or relative measurements. If, for example, you use min-width, max-width, or simply you don’t specify any width, the containing block element will be aligned left, and so it will stick to the left side of the screen.

  26. Thanks for sharing. It works!

  27. manozr says:

    can we make auto into integer value and add pixels in it? is it possible for eg. auto+ 35 px ??+

  28. Russ says:

    @manozr: no, sadly :(

  29. Jeff says:

    Thanks. Made things a lot easier for this noob :)

  30. Beth says:

    Centering with CSS so excruciatingly frustrating! I have a flexible layout with nav like this:

    #topnav {
    margin: 0px;
    padding-top: 3px;
    padding: 0px;
    }

    #topnav li {
    border-left:1px solid #ccc;
    float: left;
    display: block;
    padding-right: 20px;
    padding-left: 20px;
    text-align:center;
    font-family: “Arial”, Helvetica, sans-serif;
    font-size: 12px;
    color: #792E2E;
    text-decoration: none;
    }

    Why can’t I just wrap my menu in a container (that I could re-use for centering other content) like this:

    #centerit {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    How can I center the entire navigation set?

  31. Russ says:

    As soon as you add a width to the #centerit div your layout will center in the viewport

  32. Misafir says:

    thanks , very good

  33. Bakugan says:

    Good CSS tips. Thanks bro :)

  34. Prabhatsinh says:

    Thank You very much
    It’s working

  35. Angel says:

    Thank you so much. I had almost given up on getting my layout centered.

  36. Russ says:

    @Angel, @Bakugan, @Prabhatsinh, @Misafir – thanks all :)

  37. Thank you so much. I had almost given up on getting my layout centered.

  38. incredible says:

    I had almost given up on getting my layout centered.nice sharing, thanks for sharing.