When using margin: 0 auto;, it means that there is a margin size of 0 on the top and bottom of the element, with the available space being divided equally for the left and right margins. This behavior works as expected in the example below.
In contrast, changing the margin to margin: 1 auto (or any other number) causes the inner element to shift all the way to the left when I would have anticipated it to stay centered but shrink vertically instead.
CSS Code:
#outer {
height: 30px;
background: blue;
}
#inner {
margin: 0 auto;
width: 100px;
height: 100%;
background: red;
}<div id="outer">
<div id="inner"></div>
</div>