Center a box both axes with flexbox. Then lay out a nav with a logo on the left and links on the right.
Whether you know the main/cross axis model and the justify/align pair.
Flexbox is one-dimensional layout along a MAIN axis (set by flex-direction: row default, or column) with a perpendicular CROSS axis. justify-content aligns items along the main axis (flex-start, center, space-between, space-around, space-evenly); align-items aligns along the cross axis (stretch default, center, flex-start, baseline). So dead-center is just display: flex; justify-content: center; align-items: center. Each item's flexibility is `flex: grow shrink basis` — flex: 1 means 'grow to share leftover space equally'; flex: 0 0 auto means 'don't grow or shrink, size to content'. gap adds spacing without margin hacks. The classic nav pattern: a flex row with justify-content: space-between pushes the logo and the link group to opposite ends; wrap the links in their own flex container with a gap. margin-left: auto on a single item also shoves it (and everything after) to the far end — a handy trick. Use flexbox for one axis (a row of buttons, a toolbar, centering); use grid when you need rows AND columns together.
Toolbars, nav bars, button rows, and centering a single element — any time layout runs along one axis.