A new way to center block elements using place-self 관련

CSS > Article(s)

---

Article(s)

---

A new way to center block elements using place-self

A modern way to center block elements using place-self instead of auto margin and max-width

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 justify-self on block element by 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 justify-items on block elements by t_afif on CodePen.

More CSS Tips

• A CSS-only clock showing the current time Use modern CSS (and some hacks) to show the current time using only CSS. January 07, 2025
• Smooth rotation with modern CSS Create a smooth rotation of any element using modern CSS. January 03, 2025
• Glowing border animation with a smooth stop Add a fancy border animation on hover that stops smoothly on mouseout. December 03, 2024
• Full-bleed layout with modern CSS A few lines of code to make a section extend to the edges of the screen. November 26, 2024

A new way to center block elements using place-self

---

A modern way to center block elements using place-self instead of auto margin and max-width