CSS Centering horizontally

I just spent absolutely ages searching the internet for a solution such as this.

Basically, I was missing out the margin-left:auto & margin-right:auto ... the result being it worked in IE but nothing else.

So is IE the browser breeching standards compliance here ? ... or is Mozilla being too 'picky' ?

Phew ... this just saved me reverting to the dreaded <center> tag !

How can I accomplish the same vertically ?
( I have a form where most of the <label>'s are 2 lines of text and I want them vertically centred to the <input> boxes to their right [ I'm using a <table> to layout the form, but I may try and fully replace this with CSS at a later date ] )

This has been asked a few times and I am looking forward for some way of doing it.

Try this for an explanation of standard and quirk modes when centering blocks. It explains this aspect very clearly if you read it all through and look at the examples.

http://theodorakis.net/webauthoring.html

Max

I love you Tony for this pearl of wisdom! When Google failed I almost gave up on ever getting my box centered, then I remembered CSSCreator.com. Thanks again!

Centring blocks using absolute positioning and negative margins:

#thisblock {
position: absolute;
left: 50%;
width: 500px;
padding: 10px;
border: 2px solid #000;
margin-left: -262px;
}

...

<div id="thisblock">
   Centre-me-do!
</div>

Requirements:
The width of the box must be set.

How does it work?
It's simple when you think about it - the left: 50% positions the box so that it's left side is in the middle of the page. Using negative margin-left, we then pull the box back across the page by half of it's width, so there is an equal amount of it's width either side of the centre of the page - i.e. the box is centred.

Calculating margin-left:
Don't forget to take into account that box width = border + padding + width (margins can be ignored in this case), so from left to right, #thisblock has:

2px (border) + 10px (padding) + 500px (width) + 10px (padding) + 2px (border) = 524px

So in order to pull #thisblock halfway back across the page, we will need to set margin-left to -(524/2) = - 262ox.

Compatibility:
Mozilla Firebird (tested by insin)
Internet Explorer 6 (tested by insin)
Internet Explorer 5 will most likely need the Box Model Hack to be used to set the box width correctly - see the Box Model Hack version below. (not tested by insin)

I don't really see why the last reply was posted... expect for being a more complicated way of doing it.

I see that the first code posted by Tony works both in IE and Mozilla. Then why do we have to use negative margins and stuff? I had that before for this div I needed to be centered, but Tony's code is much smaller, less confusing and easily modified to fit many needs. I can even use percentage widths inside other divs... which is not possible with the negative margins method!

Why then? Just because text-align is not meant to be used for centering divs and only text... we shouldn't be using it? Wouldn't this validate?

Hi enodur,
The negative margin method is an alternative, you are free to choose which method you like.
Both methods should validate.
Using text-align: center to center a box is not what that property was meant for, it is only there to get IE to center corectly.
You may want to use text-align:left in the inner box to realign the text.

The negative margin method is quite simple once you understand it.
Firstly the left 50% puts the left edge of the box in the middle of the screen.
Then you use the negative margin which is half of the width of the box to move the center of the box into the center.

Hope that helps.

I guess u are right... but I find the first one better in my case when I want my centered content to have variable percentage-based width according to the size of the container object. i.e. a menu column that auto-adjusts its width based on the screen resolution. And I don't mind setting the text-align to left in the child objects.

Anyway, is this just a bug in IE (if it is, Mozilla has it too!)? or is it gonna stay like this in browsers...?

no, it is'nt.

with negative margins, as soon as the page becomes smaller than the centered content, the left part of the content sits outside of your screen - unreadable because no scroll bar to scroll up there is supplied by the browser. (at least with ie 6, should be the same in any browser)

That centering trick (the first one) is pretty cool! I have one problem/question, though: when using it with lists, how do you make it so that the items share the same left rather than being indented?

Many thanks for your help in advance!

look here for an in depth review of css and lists...

http://www.alistapart.com/stories/taminglists/

Set a width

Add margin: 0px auto; to the code.

DONE!