Stuck in the middle

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?

you can never use margin-left and margin-right simultaneously for better results. Better Use Div in the top and put text-align: center; — Max, Jun 02 '11 at 09:18
Possible duplicate of http://stackoverflow.com/questions/4955122/what-exactly-is-needed-for-margin-0-auto-to-work ? — Chowlett, Jun 02 '11 at 09:19

score 5 · Answer 1 · edited Jul 22 '12 at 10:08

5

margin-left:50% ; margin-right:50%; would imply that the item you are centering has no width.

For a block level element like a div, the best way to center it is:

div.centered { margin: 0 auto; }

The 0 before the auto refers to top and bottom so that can be set to whatever you like. The important part is the auto which will cause the left and right margins to be automatically set and they will be equal regardless of how wide your element is.

Update: As pointed out by Phelios, a width should be specified for the div for this approach to work

edited Jul 22 '12 at 10:08

Nikola K.

7,093
13
31
39

answered Jun 02 '11 at 09:18

Brendan Bullen

11,607
1
31
40

4

given that you must specify width – Sufendy Jun 02 '11 at 09:21
"margin-left:50% ; margin-right:50%; would imply that the item you are centering has no width" – Mawg says reinstate Monica Jun 02 '11 at 14:21
"margin-left:50% ; margin-right:50%; would imply that the item you are centering has no width" - does it? 2 possibilities: 1) that is true and the browser is forgiving, since submit buttons and text centered that way _are_ shown 2) the browser _first_ calculates the size of the item (submit button, text, etc) then sets the margins to 50% of whatever is left. In either case, it seems to work, even if it is "wrong" – Mawg says reinstate Monica Jun 03 '11 at 02:05

thirtydot · Accepted Answer · 2011-06-02T09:31:00.813

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.

score 1 · Answer 3 · edited Jul 22 '12 at 10:08

1

To Center a div container you need to give it a width and a hight than you use

#div {
   height: 700px;
   width: 1000px;
   margin: 0 auto;
}

edited Jul 22 '12 at 10:08

Nikola K.

7,093
13
31
39

answered Jun 02 '11 at 09:18

Rafael Marques

797
1
8
18

Stuck in the middle

3 Answers3