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

Question

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 position¹

Off the top of other people's heads:

4. The element must have a width that is not auto²

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

---

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

²_{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".}

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).

Complete rule for CSS:

1. (display: block AND width not auto) OR display: table
2. float: none
3. position: relative OR position: static

OR

1. parent element with display: flex

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.

Off the top of my head, if the element is not a block element - make it so.

and then give it a width.

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 ;)

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.