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.
div#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:
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}However, 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;
}
div#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;
}
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}
Translations
- French by Rodrigue
- Turkish by Kara
- Russian by Nickolas Loiko
- Norwegian by Bjorn Enki
- Ukrainian by Alex
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
thx, had the same problem. to easy in the end!!
Thank you, so easy to understand!
Thanks, I was needing the margins code and it works great thanks!
Thank you. The 2.0 web has lots of features which aren’t supported by these old browsers.
I would suggest an easy one:
width: 50%
float: right
Cheers
Great and EASY and useful article.
thanks,
Ham
Is there a cross-browser way to center an element vertically in a liquid layout?
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
@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/
[...] CSS Centering – fun for all! [...]
Wow, thanks. its give me usefull information. but i hate IE a lot
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.
ugh … didn’t show code. oh, well, just “display:table” style.
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
if you want to center an image, you have to add this too:
display: block
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.
Thanks ! It’s help me a lot
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!
A very simple and elegant solution
Thanks. That helped me a lot.
Thanks for the tutorial. It’s the method that has worked best for me so far.
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.
thanks , very good
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.
Thanks for sharing. It works!
can we make auto into integer value and add pixels in it? is it possible for eg. auto+ 35 px ??+
@manozr: no, sadly
Thanks. Made things a lot easier for this noob
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?
As soon as you add a width to the #centerit div your layout will center in the viewport
thanks , very good
Good CSS tips. Thanks bro
Thank You very much
It’s working
Thank you so much. I had almost given up on getting my layout centered.
@Angel, @Bakugan, @Prabhatsinh, @Misafir – thanks all
thank so you
Thank you so much. I had almost given up on getting my layout centered.
I had almost given up on getting my layout centered.nice sharing, thanks for sharing.