CSS safe center: Overflow-safe Alignment
Overflow-safe centering without media queries
A centered nav or chip row that is wider than its container overflows both sides. The start edge sits past the scrollport, so you cannot scroll to it. A media query used to switch to flex-start. justify-content: safe center falls back to start only when centering would overflow.
.nav { display: flex; justify-content: center;}@media (max-width: 600px) { .nav { justify-content: flex-start; }}/* drops centering at a guessed breakpoint */.nav { display: flex; justify-content: safe center;}/* falls back to start when centering would overflow */Browser Support
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
Start edge stays reachable
Plain center clips overflow on both sides. safe switches to start, so the first item stays inside the scrollport.
Same as center when it fits
safe does nothing until the items overflow. Wide screens still get a centered row. No breakpoint to maintain.
Flex and grid
The same keyword works on justify-content, align-items, place-content, and the *-self properties.
How it works
justify-content: center splits leftover space equally on both sides. When the items are wider than the container, half the overflow hangs off the start edge. Horizontal scroll cannot reach that side, so the first link or chip is gone. The usual fix was a max-width media query that switched the row to flex-start and gave up centering on every small screen, even when the items still fit.
safe is an overflow-position keyword from CSS Box Alignment. Put it before a positional value: justify-content: safe center. If that alignment would overflow the container, the browser uses start instead. If the items fit, the row stays centered. No breakpoint, no JavaScript measuring the row.
The opposite keyword is unsafe, which keeps the requested alignment even when content is unreachable. Omitting both is a mix of the two, and in practice it behaves like unsafe for centered overflow. safe also works on align-items, place-content, and the self variants. Tailwind v4 maps this to justify-center-safe.