matt matt - 3 months ago 9
CSS Question

margin 0 auto centers an element, why doesn't margin 1 auto do the same?

I understand that

margin: 0 auto;
means a margin of size 0 on the top and bottom of the element, and a margin of size whatever is available, divided equally, on the left and right of the element.

This works as I would expect in the following example - but when I change it to
margin: 1 auto
(or any other number) the inner element moves all they way over to the left. I would have expected it to remain centered but to have shrunk vertically.

Code:



#outer {
height: 30px;
background: blue;
}
#inner {
margin: 0 auto;
width: 100px;
height: 100%;
background: red;
}

<div id="outer">
<div id="inner"></div>
</div>




Answer

The reason your code fails when you change it to margin: 1 auto is that 1 is not a valid CSS measurement.

Only 0 can be written without a unit (such as px or pt). If you change it to margin: 1px auto, it works as expected.