center an element
in this recipe you will see how to center one box inside another. centering both horizontally and vertically was difficult before flexbox, with the box alignment properties it is now straightforward.
withflexbox
center an element with flexbox
withgrid
center an element with grid
withposition and translate
center an element with position and translate
browser support
| chrome | firefox | safari | |
|---|---|---|---|
| aspect-ratio | 88 | 89 | 15 |
| display: flex | 29 | 20 | 9 |
| display: grid | 57 | 52 | 10.1 |
| place-items | 59 | 45 | 11 |
| translate | 104 | 72 | 14.1 |