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?
Best Answer
Off the top of my head:
display: block
ordisplay: table
Off the top of other people's heads:
width
that is notauto
2Note 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".