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

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?

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.