CSS Tip

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.

More CSS Tips