194

What does auto do in margin: 0 auto;?

I can't seem to understand what auto does. I know it sometimes has the effect of centring objects.

9 Answers 9

294

When you have specified a width on the object that you have applied margin: 0 auto to, the object will sit centrally within its 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.

6
  • but we never define any width to body and we always give width and margin:0 auto to #wrapper Commented Jul 3, 2010 at 8:08
  • 1
    ok then margin between body and object will be calculated by browser automatically. Commented Jul 3, 2010 at 8:15
  • Is there any similar value in %? I mean is there any other property in css which can give same result like left and right auto Commented Jul 3, 2010 at 8:16
  • 2
    @GenericTypeTea - and what happens in margin:auto 0 condition? Commented Jul 3, 2010 at 10:51
  • However, why when I use margin: 20 auto does that seem to affect the left-right positioning? It would seem that all I did was add top / bottom margin...
    – pitosalas
    Commented Jul 27, 2013 at 20:50
20

auto: The browser sets the margin. The result of this is dependent on the browser.

margin:0 auto specifies:

  • top and bottom margins are 0
  • right and left margins are auto
10

From the CSS specification on Calculating widths and margins for Block-level, non-replaced elements in normal flow:

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.

3
  • "their used values are equal" what is the means of this? Commented Jul 3, 2010 at 8:12
  • 3
    @metal-gear-solid - If the parent's width (determine by the browser or by the specified width) is 100px and your child div's width is 50px. Then margin:0 auto will determine that there's 50px of available space. It will then divide that by 2, giving 25. The left and right margin are then both set to 25, i.e. the values are set equally.
    – djdd87
    Commented Jul 3, 2010 at 8:17
  • 1
    The used values refer to the actually used values depending on the actual visual properties of the element that use this property and its containing block. The linked section has a formula that is used to calculate the horizontal difference between an element and its containing block. That difference is then spitted equally and used as the actual horizontal margin values.
    – Gumbo
    Commented Jul 3, 2010 at 8:18
8
margin:0 auto;

0 is for top-bottom and auto for left-right. It means that left and right margin will take auto margin according to the width of the element and the width of the container.

Generally if you want to put any element at center position then margin:auto works perfectly. But it only works in block elements.

7

It becomes clearer with some explanation of how the two values work.

The margin property is shorthand for:

margin-top
margin-right
margin-bottom
margin-left

So how come only two values?

Well, you can express margin with four values like this:

margin: 10px, 20px, 15px, 5px;

which would mean 10px top, 20px right, 15px bottom, 5px left

Likewise you can also express with two values like this:

margin: 20px 10px;

This would give you a margin 20px top and bottom and 10px left and right.

And if you set:

margin: 20px auto;

Then that means top and bottom margin of 20px and left and right margin of auto. And auto means that the left/right margin are automatically set based on the container. If your element is a block type element, meaning it is a box and takes up the entire width of the view, then auto sets the left and right margin the same and hence the element is centered.

5

The auto in

margin: 0 auto;

tells the browser to set the margin-left and margin-right properties of the element automatically which the browser accomplishes by giving both margins the same value.

Some important things to note are:

  1. It can only be used for block-level elements having specified width:

    a. If the width is not specified, the left and right margins would be set to 0 as block-level elements take up the entire width of the container. enter image description here

    b. For inline or inline-block elements, there is no horizontal space available to set the margin as there are other inline elements present before and after. enter image description here

  2. auto is useful only for horizontal centering, so using margin: auto 0; will NOT center an element vertically. source

.card {
  width: 400px;
  height: 100px;
  background-color: yellow;
}

.box {
  width: 30px;
  height: 20px;
  background-color: red;
  margin: 0 auto;
  /* margin: auto 0; */
  /* display: inline-block; */
}
<div class="card">
  <div class="box">Box</div>
</div>

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

0 is for top-bottom and auto for left-right. The browser sets the margin.

0
margin: 0 auto 

It is a CSS property that sets the top and bottom margins of an element to 0 and centers it horizontally within its parent element.

This technique is often used to center a block-level element such as a div or a image.

-4

It is a broken/very hard to use replacement for the "center" tag. It comes in handy when you need broken tables and non-working centering for blocks and text.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.