Safe align your content

Temani Afif6/10/25About 2 minCSSArticle(s)blogcss-tip.comcss

Safe align your content 관련

CSS > Article(s)

Article(s)

Learn about the keyword ”safe” and how to use it

Do you know the safe keyword? In some specific cases, your content may overflow the container and you won't be able to scroll to it. It happens with some alignment configurations such as center and end.

safe can prevent this behavior!

/* default behavior, not always good 🤨 */
.box {
  justify-content: center; 
}

/* safe alignment! 😌 */
.box {
  justify-content: safe center; 
}

Resize the container below and toggle the safe option to see the difference.

See Safe alignment by t_afif on CodePen.

It works with all the alignment properties.

.container {
  /* place-content, justify-content,  align-content */
  /* place-items, justify-items, align-items */
}
.element {
  /* place-self, justify-self, align-self: */
}

It's not only limited to flexbox and CSS Grid, it's also applicable to block layout:

See Safe alignment with block containers by t_afif on CodePen.

Note that auto margin is another alternative for safe alignment:

See Safe alignment with auto margin by t_afif on CodePen.

More CSS Tips

Invert CSS Shapes using shape() A simple trick to get the cut-out version of any shape created using shape(). July 01, 2025
Dots loader using shape() A classic 3 dots loader created using the new shape(). June 24, 2025
How to style a broken image Give a nice visual touch to images that fail to load. May 22, 2025
Arc shape with rounded edges A modern way to create arc shapes with rounded edges using minimal code. May 20, 2025

Safe align your content

Learn about the keyword ”safe” and how to use it