Five ways to center content in CSS, stress-tested

Centering in CSS has a reputation for being tricky, but modern layout methods have largely solved the problem. The real question is which technique holds up best when content changes: when it grows, shrinks, wraps, or the document direction changes. To find out, five common centering approaches were put through a series of resilience tests covering changes in width, height, item count, content length, and writing mode.

Each test uses a container with a grey background and white children. A pink border on the container or child indicates which element owns the centering styles.

The Resilience Ringer

Each technique was scored against five stress tests:

  1. Squish: handles changes to container width
  2. Squash: handles changes to container height
  3. Duplicate: handles changes to the number of items
  4. Edit: handles changes to content length and language
  5. Flow: works with different document directions and writing modes

1. Content Center

Built on display: grid and the place-content shorthand, this technique centers and justifies children collectively. It scores well across all five tests, making it a strong option for groups of elements meant to be read together, like paragraphs and headlines.

Pros

  • Content stays centered even under constrained space and overflow
  • Centering edits and maintenance live in one place
  • gap guarantees equal spacing between n children
  • Grid creates rows by default

Cons

  • The widest child (max-content) sets the width for all others

Best for: macro layouts containing paragraphs and headlines, prototypes, and anything requiring legible centering.

2. Gentle Flex

A truer centering-only strategy, Gentle Flex does not alter any child box sizes during centering. It stacks, centers, and spaces items as gently as possible, making it the most versatile of the five.

Pros

  • Only handles alignment, direction, and distribution
  • Edits and maintenance are in one spot
  • gap guarantees equal spacing among n children

Cons

  • Requires the most lines of code

Best for: both macro and micro layouts.

3. Autobot

This technique uses a flex container with no alignment styles, relying instead on margin: auto on the direct children. There is something nostalgic about auto margins working on every side of an element.

Pros

  • Fun and quick to write

Cons

  • Awkward results when content overflows
  • Relies on distribution rather than gap, so children can end up touching container edges
  • Children can be pushed into a different box size

Best for: centering icons or pseudo-elements.

4. Fluffy Center

The only fully child-owned technique. All centering styles live on the child element itself, making it atomic and self-contained.

Pros

  • Protects its content
  • Word space acts as the gap

Cons

  • Can look trivial or be overlooked
  • Children and container can fight over sizing

Best for: word or phrase-centric elements such as tags, pills, buttons, chips, and related UI.

5. Pop & Plop

Absolute positioning pops the element out of normal flow, then plops it on top of other content. This is the classic overlay centering technique, flexible and dynamic to content size.

Pros

  • Useful and reliable for overlays
  • Invaluable when layering UI on other UI

Cons

  • Requires negative percentage values
  • Needs position: relative on the container
  • Can produce awkward early line breaks
  • Only one element per containing block without extra effort

Best for: modals, toasts, messages, stacked elements, depth effects, and popovers.

The winner: Gentle Flex

Across all tests, Gentle Flex comes out on top. It performs well for both macro and micro layouts, and its behavior matches expectations in nearly every scenario. It is more verbose than other options, but the reliability it provides outweighs the extra code.

Most valuable: Fluffy Center

While Gentle Flex wins the challenge, Fluffy Center is the most valuable technique in practice. It is so atomic that it is easy to forget it is a centering strategy at all, yet it quietly underpins much of the centering done in everyday UI work.