It seems to work in all main browser accept IE5 mac.I'm afraid I don't have access to Mac at all, so I can't test anything myself. Presumably the trick you've hidden from IE5/Mac doesn't work, but I've read that the "best" approach does.
Setting the left/right margins to auto is technically the best approach as the box model clearly sets out that this will centre an element by making the margins equal. However, there is a caveat: the document must be in standards mode (you must have a correct DOCTYPE declaration) for IE6 to do this right.
selector {
margin-left: auto;
margin-right: auto;
width: ?;
}Apparently, the shorthand (margin: 0 auto;) won't work with IE5/Mac. The explicit width is important as block-level elements tend to have 100% width, by default.
Unfortunately, there is a further complication: IE5/Win won't even work with this. However, you can get around this by introducing another container and setting the text-align property to center. Though text-align should only work on the inline content of an element, IE5/Win applies it to block-level elements, too.
#wrapper {
/* Will centre block-level children in IE5/Win. */
text-align: center;
}
#wrapper .container {
/* Centre the element. */
margin-left: auto;
margin-right: auto;
width: 730px;
/* Re-apply left alignment. */
text-align: left;
}
<div id="wrapper">
<xx class="container">
</xx>
</div>Take a look at the All My FAQs article (http://www.allmyfaqs.com/faq.pl?Center_with_CSS) and David Dorward's own centring article (http://dorward.me.uk/www/centre/).
Good luck,
Mike