What does auto do in margin 0 auto

Question

What does auto do in margin 0 auto    I can t seem to understand what auto does  I know it sometimes has an effect of centering objects  Thanks

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

auto    The browser sets the margin  The result of this is dependant of the browser  margin 0 auto specifies    top and bottom margins are 0   right and left margins are auto

[css] What does auto do in margin:0 auto?

Examples related to css