A new way to center block elements using justify-self: center
A new 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 {
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 justify-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 {
justify-items: center;
}See the Pen justify-items on block elements by Temani Afif (@t_afif) on CodePen.