A new way to center block elements using place-self
A modern and more intuitive way to center block elements is available! One line of code and you can replace the use of margin: auto combined with width/max-width.
.box {
place-self: center; /* OR justify-self: center */
}The support is still not good. Use the latest version of Chrome to test:
See the Pen justify-self on block element by Temani Afif (@t_afif) on CodePen.
Using place-items: center on a parent element will do the same. It's useful if you want to center all the elements inside a container.
.container {
place-items: center; /* OR justify-items: center */
}See the Pen justify-items on block elements by Temani Afif (@t_afif) on CodePen.