The simple way to center a flex item is using center for justify-content or align-content.

When we use center with dynamic flex items, there is a chance of data loss when the items overflow the alignment container.

Safe alignment

To avoid the data loss when the items overflow, we can use the safe keyword along with center

justify-content: safe center 

Now this will help us center the items when there is no overflow and it will use start when the flex-items start overflowing.

This will help us prevent the data loss.

using with tailwindcss

In case if we want to safe alignment with tailwind justify-center-safe and justify-end-safe.

Hope this is helpful.

Versions of Language/packages used in this post.