What Does Auto Do in Margin: 0 Auto

What does auto do in margin: 0 auto?

When you have specified a width on the object that you have applied margin: 0 auto to, the object will sit centrally within it's parent container.

Specifying auto as the second parameter basically tells the browser to automatically determine the left and right margins itself, which it does by setting them equally. It guarantees that the left and right margins will be set to the same size. The first parameter 0 indicates that the top and bottom margins will both be set to 0.

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

Therefore, to give you an example, if the parent is 100px and the child is 50px, then the auto property will determine that there's 50px of free space to share between margin-left and margin-right:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

Which would give:

margin-left: 25;
margin-right: 25;

Have a look at this jsFiddle. You do not have to specify the parent width, only the width of the child object.

What does margin auto mean?

Auto margins

Depending upon the circumstances, provision of an auto value instructs
the browser to render a margin according to the value provided in its
own stylesheet. However, when such a margin is applied to an element
with a meaningful width, an auto margin instead causes all of the
available space to be rendered as whitespace.

From w3.org

Is there any difference between margin: 0 auto; and margin: auto;

Yes.

margin: 0 auto;

Sets the element's left and right margins to auto, and the top and bottom margins to 0.

margin: auto;

Sets all the margins to auto. You are probably getting the same behaviour due to your <body> being 100% height, hence the vertical auto margins have no effect.

What, exactly, is needed for margin: 0 auto; to work?

Off the top of my head:

  1. The element must be block-level, e.g. display: block or display: table
  2. The element must not float
  3. The element must not have a fixed or absolute position1

Off the top of other people's heads:


  1. The element must have a width that is not auto2

Note that all of these conditions must be true of the element being centered for it to work.


1 There is one exception to this: if your fixed or absolutely positioned element has left: 0; right: 0, it will center with auto margins.

2 Technically, margin: 0 auto does work with an auto width, but the auto width takes precedence over the auto margins, and the auto margins are zeroed out as a result, making it seem as though they "don't work".

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

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.

Is margin: 0 auto default for CSS divs?

All current browsers have margin: 0 as the default margin for div elements.

margin: 0 auto is not the same thing -- if the div has a fixed width, margin: 0 auto creates a div that is horizontally centered in its container.

margin: 0 auto doesn't work when width is defined

The <input> is an inline-level element, the margin: auto tricks only works for block level elements.

You can do:

.search {
...
width: 70%;
margin: 0 auto;
display: block; /*add this line*/
}

Or, if you prefer leave it as inline you can do:

.mover {
text-align: center;
}


Related Topics



Leave a reply



Submit