Center with flexbox + margin: auto

Quick implementation

/* Center a single item with margin: auto */
.flex-center-container {
  display: flex;
  min-height: 12rem;
}

.flex-center-item {
  margin: auto; /* takes all available space in every direction */
}

/* Push one item to the right in a flex row */
.flex-row {
  display: flex;
  gap: 1rem;
}

.flex-row .push-right {
  margin-left: auto;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer explaining flexbox centering patterns.

Goal: Center a single element inside a flex container using margin: auto,
and demonstrate using margin-left: auto to push a nav item to the far
right — without using justify-content or align-items on the container.

Technical constraints:
- The container gets display: flex and a min-height so the centering
  is visible.
- The child to be centered gets margin: auto which absorbs all available
  free space in every direction, pulling the element to the center.
- For the nav push-right pattern, set margin-left: auto on the item
  that should be pushed to the trailing edge; leave the container
  without justify-content.
- Use oklch() for any color values — no hex or rgba.
- No JavaScript required.

Framework variant (pick one):
A) Vanilla CSS utility classes .flex-center-container and .flex-center-item,
   plus a .push-right modifier for the nav pattern. Both usable on any
   container with the appropriate children.
B) React component — FlexCenter wraps a single child and applies
   margin: auto via an inline style; PushRight wraps a child and applies
   margin-left: auto, suitable for use inside a flex row.

Edge cases to handle:
- If multiple children are given margin: auto, the free space is split
  equally between all auto margins — they will distribute evenly, not
  all go to the center. Document this clearly.
- When the container has no explicit height or min-height, vertical
  centering has no effect since there is no free space in the block
  direction. Add min-height to the container.
- margin: auto on a flex item does not work for centering in CSS grid —
  it does, but the behavior is the same. Note this in a comment.
- For RTL support, prefer margin-inline-start: auto instead of
  margin-left: auto so the push-right pattern works in right-to-left
  writing modes.

Return CSS only (or a React component if variant B is chosen).

Why margin: auto inside flexbox centers an item

In a flex container, margin: auto on a child does something special: it absorbs all available free space in the specified direction before alignment properties are applied. When set on all four sides with margin: auto, the element pulls toward the center from every direction simultaneously, landing in the exact middle of the container regardless of the container's size or the element's own size.

This is fundamentally different from setting justify-content: center and align-items: center on the container. Those alignment properties affect all children. margin: auto is per-element — only the item with margin: auto is centered; siblings remain unaffected. This makes it the right tool when you need one specific child centered inside a flex container that might contain other content.

The push-right pattern (margin-left: auto) is equally powerful. In a horizontal flex row, margin-left: auto on one item absorbs all remaining horizontal space between that item and its predecessor, pushing the item as far to the right as the container allows. This is the cleanest way to build a nav bar with some links on the left and a sign-in button on the right.

Comparing to justify-content and align-items

The three common flexbox centering tools — justify-content: center, align-items: center, and margin: auto — solve related but distinct problems. Use justify-content: center and align-items: center when you want all children centered as a group. Use margin: auto when you want a single child centered independently of its siblings.

A concrete example: a card with an icon, a heading, and a centered call-to-action button at the bottom. Setting margin-top: auto on the button pushes it to the bottom of the card when the card stretches in a grid layout — no absolute positioning required. Setting margin: auto (all sides) on an element in a flex column perfectly centers it vertically and horizontally within the column.

Both margin: auto and alignment properties are supported in all modern browsers with no vendor prefixes needed. The same margin: auto trick also works in CSS grid, where it centers an item within its grid area.

RTL support and the margin-inline alternative

When building the push-right pattern, prefer margin-inline-start: auto over margin-left: auto for robust right-to-left support. In a left-to-right document, margin-inline-start maps to the left margin — identical behavior. In a right-to-left document (dir="rtl" or writing-mode changes), margin-inline-start maps to the right margin, automatically mirroring the layout without extra CSS.

Similarly, margin-inline: auto horizontally centers a block element within its container (the classic margin: 0 auto pattern) while respecting writing direction. For most centering use cases, the logical property variants are worth adopting to future-proof components against internationalisation requirements.