Entry 07

Safe alignment

Use it wherever content is centered or end-aligned in a container that can become too small, such as a tab row, a toolbar or a vertically centered modal.

Open

At full width the tabs are centred. At 360 the row scrolls, and you can still reach the first tab.

Code CSS · 5 lines

.tabs {
  display: flex;
  overflow-x: auto;
  justify-content: safe center;
}

Why it works, the rules and the credits 1 reason · 2 rules · support · credits

Why it works

Plain center pushes overflow off the start edge, where scrolling cannot reach it. safe falls back to start once the content overflows.

Rules

It works on every align-*, justify-* and place-* property.
Auto margins on the item center it the same way and are safe in every browser that has flexbox. Push one item away with an auto margin has them.

Support

Chrome: 115
Firefox: 63
Safari: 17.6

Credits

Borrowed from: Temani Afif, Safe align your content, 2025-06-10