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

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:

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".}

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 head, it needs a width. You need to specify the width of the container you are centering (not the parent width).