safe center で「溢れたら左端から」の中央寄せにする
justify-content: safe center は、収まる時は中央寄せ、収まらない時は先頭（左端）寄せに自動で切り替わり、溢れた中身が左側に切れて見えなくなるのを防ぐ。
どんな時に使う？
タブ、チップ、パンくず、ボタン群などを display: flex; justify-content: center で中央に並べ、狭い画面では overflow-x: auto で横スクロールさせたい時。普通の center だと、中身が箱より広くなった瞬間に左右均等にはみ出し、左側にはみ出した部分はスクロールしても戻れない（スクロール位置 0 より左に行けない）ため、先頭のタブが切れたまま触れなくなる。
コード
css
.tabs {
display: flex;
justify-content: safe center; /* 溢れたら start と同じ扱いになる */
overflow-x: auto;
}safeは配置キーワードの前に付ける修飾子で、「中身が溢れる時はデータ損失を避けて start 側に寄せる」という意味。align-items: safe center（縦方向）や Grid のjustify-content/align-content、place-contentでも使える。- 逆の
unsafe centerは溢れても中央寄せを貫く（はみ出しを許容する）。
注意点・対応状況
- 現行の主要ブラウザで使える。古い Safari は
safeを理解せず宣言ごと無視するので、気になるなら手前にjustify-content: center;を書いてからsafe centerで上書きしておく。 - 似た効果は子側に
margin-inline: auto（先頭と末尾の子に）を付けても得られるが、safe centerなら1行で済む。 - 縦方向の中央寄せ（モーダル内のコンテンツなど）でも、高さが足りない時に上が切れる同じ問題が起きる。
align-items: safe centerで防げる。