Question

When should I use margin-left:auto; margin-right:auto to center and when should I use margin-left:50%; margin-right:50%?

Maybe “auto” when I am centering something contained in another element & 50% when I am centering on the page?

Or I am I just hopelessly confused?

Answer 1

Or I am I just hopelessly confused?

Maybe 🙂

• margin-left: 50%; margin-right: 50% is not generally useful: http://jsfiddle.net/VcDYr/
• Where you might use margin-left: 50% is if you’re centering like this: http://jsfiddle.net/VcDYr/1/
• To “center the page”, you invariably want margin-left: auto; margin-right: auto. A shorter way to write this is margin: 0 auto: http://jsfiddle.net/VcDYr/2/

Consider that div is a block-level element.

See: http://www.w3.org/TR/CSS21/box.html#margin-properties

auto – See the section on calculating
widths and margins for behavior.

Which leads to: http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins

Block-level, non-replaced elements in
normal flow

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = width of containing block

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.