margin: auto is not only for horizontal centering.
margin: auto normally centers a block element only horizontally.
To achieve vertical centering,
it's common to reach for e.g. flexbox.
Turns out that
margin: auto can in some cases center vertically as well.
The element must also have:
- an explicit height (e.g.
This can be very useful for modals.
Note that for only vertical centering,
margin-bottom need to be set to
margin-left can be anything.
This is similar to horizontal centering:
margin-left need to be set to
margin-bottom can be anything.