display: flex turns the container into a flex parent, align-items: center centers the cross axis (vertical, by default), and justify-content: center centers the main axis (horizontal). The min-height: 100vh makes the container at least the viewport tall so the centering has room to work; for non-fullscreen wrappers, swap it for an explicit height. This is the three-line incantation that replaced a decade of hacks for centering modals, splash screens, and empty states.

inline-flex keeps the container itself flowing with surrounding text (so a centered button sits next to inline labels) while the children get the same alignment behaviour as full flex. Adding gap is the one-line replacement for margin-right between an icon and its label, and it removes the awkward trailing space on the last child. This is the pattern most design systems use for buttons, chips, and tag pills.

Toolbars and headers usually have two or three groups separated by space: brand on the left, search in the middle, actions on the right. justify-content: space-between pushes the groups apart without nested wrappers, and the inner .group rule keeps icons aligned to their labels. The outer gap stops things from touching even when there is no extra space. This shape generalises to any horizontal bar where the slots have different content widths.