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:
- The element must be block-level, e.g.
display: block
ordisplay: table
- The element must not float
- The element must not have a fixed or absolute position1
Off the top of other people's heads:
- The element must have a
width
that is notauto
2
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
How to Increase the Gap Between Text and Underlining in Css
How to Position an Element Fixed Relative to Parent
Css: Center Element Within a ≪Div≫ Element
100Vw Causing Horizontal Overflow, But Only If More Than One
Css Transition Shorthand With Multiple Properties
Specify an Svg as a Background Image and Also Style the Svg in Css
Bootstrap 3 - Desktop View on a Mobile Device
Padding-Bottom/Top in Flexbox Layout
What Does Auto Do in Margin: 0 Auto
Difference Between CSS Height: 100% VS Height: Auto
How to Build a 2 Column (Fixed - Fluid) Layout With Twitter Bootstrap
How Do Min-Content and Max-Content Work
Should I Use 'Border: None' or 'Border: 0'
How to Make Generated Content Selectable