What, exactly, is needed for "margin: 0 auto;" to work?
CssCss Problem Overview
I know that setting margin: 0 auto;
on an element is used to centre it (left-right). However, I know that the element and its parent must meet certain criteria for the auto margin to work, and I can never seem to get the magic right.
So my question is simple: what CSS properties have to be set on an element and its parent in order for margin: 0 auto;
to left-right centre the child?
Css Solutions
Solution 1 - Css
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".
Solution 2 - Css
Off the top of my head, it needs a width
. You need to specify the width of the container you are centering (not the parent width).
Solution 3 - Css
Complete rule for CSS:
- (
display: block
ANDwidth
not auto) ORdisplay: table
float: none
position: relative
ORposition: static
OR
- parent element with
display: flex
Solution 4 - Css
Off the top of my cat's head, make sure the div
you're trying to center is not set to width: 100%
.
If it is, then the rules set on the child divs are what will matter.
Solution 5 - Css
Off the top of my head, if the element is not a block element - make it so.
and then give it a width.
Solution 6 - Css
It will also work with display:table - a useful display property in this case because it doesn't require a width to be set. (I know this post is 5 years old, but it's still relevant to passers-by ;)
Solution 7 - Css
Please go to this quick example I've created jsFiddle. Hopefull it's easy to understand. You can use a wrapper
div with the width of the site to center align. The reason you must put width
is that so browser knows you are not going for a liquid layout.
Solution 8 - Css
It's perhaps interesting that you do not have to specify width for a <button>
element to make it work - just make sure it has display:block
: http://jsfiddle.net/muhuyttr/
Solution 9 - Css
Here is my Suggestion:
First:
1. Add display: block or table
2. Add position: relative
3. Add width:(percentage also works fine)
Second:
if above trick not works then you have to add float:none;
Solution 10 - Css
In case you don't have a fixed width for your parent element, having your parent element with display: flex
worked for me.
Solution 11 - Css
For anybody just now hitting this question, and not being able to fix margin: 0 auto
, here's something I discovered you may find useful: a table
element with no specified width must have display: table
and not display: block
in order for margin: auto
to do work. This may be obvious to some, as the combination of display: block
and the default width
value will give a table which expands to fill its container, but if you want the table to take it's "natural" width and be centered, you need display: table