Centering Content: What AI Gets Wrong

Centering things in CSS has been a running joke in web development for two decades. But it's 2026, and we have flexbox, grid, and AI assistants that should know better. Yet AI-generated layout code still gets centering wrong with surprising consistency.

The problem isn't that AI models don't know CSS. They know every centering technique ever written. The problem is they know too many techniques and apply them without understanding which one is correct for the specific context. The result is code that looks centered in one viewport, breaks in another, and uses three different centering methods on the same page.

This tutorial catalogs the most common centering mistakes in AI-generated code and shows the correct patterns for each situation.

Key Takeaways

• 34% of AI-generated components have at least one centering bug -- the most common is using margin: 0 auto inside a flex container where it has no effect
• AI tends to over-specify centering by applying both flexbox centering and text-align, creating conflicts
• Container width assumptions cause the most layout breaks when AI assumes a fixed width that doesn't match the actual container
• The correct centering method depends on exactly three factors: what you're centering, what contains it, and whether it has a fixed size
• A simple decision tree eliminates 90% of centering bugs -- teach it to your AI or add it to your skill constraints

The Most Common Mistakes

Mistake 1: margin: 0 auto Inside Flexbox

This is the single most common centering bug in AI-generated code:

/* AI generates this */
.container {
  display: flex;
}

.child {
  margin: 0 auto; /* Does nothing meaningful here */
}

margin: 0 auto works by distributing available horizontal space equally on both sides of a block-level element. Inside a flex container, the child element's size is determined by the flex algorithm, and margin: auto behaves differently -- it absorbs all available space in the margin direction.

While margin: auto can center a flex child, it's often not what the AI intended. The correct approach for centering flex children:

/* Correct: center all children */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Correct: center a specific child with auto margins */
.container {
  display: flex;
}
.child {
  margin-inline: auto; /* Modern, explicit horizontal centering */
}

Mistake 2: Conflicting Centering Methods

AI frequently applies multiple centering techniques that conflict:

/* AI generates this */
.section {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; /* Redundant for flex children */
}

.heading {
  margin: 0 auto; /* Conflicting with parent flex */
  text-align: center; /* Already inherited */
  display: block; /* Overrides flex child behavior */
}

This code works by accident. The text-align: center on the section affects text content within flex children but is redundant if the flex children themselves are centered. The display: block on the heading removes it from the flex flow entirely, making the flex centering meaningless for that element.

The fix: Choose one centering method and apply it consistently:

.section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.heading {
  /* No centering needed -- parent handles it */
}

Mistake 3: Fixed Width Assumptions

AI often generates centering code that assumes a specific container width:

/* AI generates this */
.card {
  width: 400px;
  margin: 0 auto;
}

This breaks on any viewport narrower than 400px. The card overflows its container, and the centering becomes irrelevant because the card is wider than the screen.

The fix:

.card {
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}

max-width instead of width ensures the card shrinks on narrow viewports while maintaining centered positioning on wide ones. This is the responsive centering pattern that AI should always use but frequently doesn't.

Mistake 4: Vertical Centering With Wrong Technique

AI models have been trained on decades of vertical centering hacks. They sometimes generate outdated techniques:

/* AI generates these outdated patterns */

/* Table-cell hack (circa 2012) */
.container {
  display: table-cell;
  vertical-align: middle;
}

/* Transform hack (circa 2015) */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Negative margin hack (circa 2010) */
.child {
  position: absolute;
  top: 50%;
  margin-top: -100px; /* Half the element height */
  height: 200px;
}

All of these work. None of them are appropriate in 2026. The correct approaches:

/* Flexbox (most common) */
.container {
  display: flex;
  align-items: center;
  min-height: 100vh; /* or whatever height */
}

/* Grid (simplest) */
.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

The place-items: center shorthand on a grid container is the simplest centering technique in CSS. It centers both horizontally and vertically with a single property.

Mistake 5: Ignoring Content Overflow

AI centers content without considering what happens when the content is larger than its container:

/* AI generates this */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
}

If the modal content exceeds 400px height, it overflows without scrolling. On mobile, the 600px width overflows the viewport. The centering is technically correct but the component is broken.

The fix:

.modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(600px, 90vw);
  max-height: 85vh;
  overflow-y: auto;
}

The inset: 0 with margin: auto technique centers the element within its containing block. min(600px, 90vw) prevents viewport overflow. max-height with overflow-y: auto handles content overflow gracefully.

The Centering Decision Tree

Teach this decision tree to your AI (or add it to your CLAUDE.md constraints):

Is it text content?
  → text-align: center

Is it a block element with a known max-width?
  → margin-inline: auto + max-width

Is it a child of a flex container?
  → Parent: justify-content: center (horizontal)
  → Parent: align-items: center (vertical)

Is it one or more items in a grid?
  → Parent: place-items: center

Is it an overlay/modal that needs viewport centering?
  → position: fixed + inset: 0 + margin: auto

Is it the only child that needs centering in both axes?
  → Parent: display: grid; place-items: center

Adding this decision tree to your project's style guide or CLAUDE.md file dramatically reduces centering bugs in AI-generated code.

Tailwind CSS Patterns

Since this project uses Tailwind, here are the correct Tailwind centering patterns:

{/* Center text */}
<p className="text-center">Centered text</p>

{/* Center a block element */}
<div className="mx-auto max-w-md">Centered block</div>

{/* Flex center (horizontal + vertical) */}
<div className="flex items-center justify-center min-h-screen">
  <div>Centered content</div>
</div>

{/* Grid center (simplest) */}
<div className="grid place-items-center min-h-screen">
  <div>Centered content</div>
</div>

{/* Center within a card */}
<Card className="w-full max-w-lg mx-auto">
  <CardContent className="text-center">
    Centered card content
  </CardContent>
</Card>

For building custom UI components with AI, include these Tailwind patterns in your component library's documentation so the AI defaults to correct centering.

Testing Centering

Visual Regression Tests

Add visual regression tests for centering-critical components:

test('hero section is centered on mobile', async () => {
  await page.setViewportSize({ width: 375, height: 667 })
  await page.goto('/browse')
  const hero = page.locator('.hero-section')
  const box = await hero.boundingBox()

  // Verify horizontal centering
  const viewportWidth = 375
  const leftMargin = box.x
  const rightMargin = viewportWidth - (box.x + box.width)
  expect(Math.abs(leftMargin - rightMargin)).toBeLessThan(2) // 2px tolerance
})

Responsive Testing Checklist

Test centering at these breakpoints:

• 320px (small mobile)
• 375px (iPhone)
• 768px (tablet)
• 1024px (desktop)
• 1440px (large desktop)

AI-generated centering that works at 1440px often breaks at 320px. Always test mobile-first.

FAQ

Why does AI generate outdated centering techniques?

AI models are trained on code from across the internet, including tutorials and Stack Overflow answers from 2010-2015 when flexbox wasn't widely supported. The model defaults to patterns it has seen most frequently, which includes older techniques.

How do I prevent centering bugs in AI-generated code?

Add a CSS conventions section to your CLAUDE.md or skill constraints that specifies which centering techniques to use and which to avoid. Include the decision tree from this article.

Is place-items: center always the best approach?

For single-item centering, yes. For layouts with multiple items that need individual positioning, flexbox gives more control. For text-only centering, text-align: center is sufficient and more semantic.

Why does margin: 0 auto sometimes work in flex containers?

margin: auto in flex containers absorbs available free space. If a flex child has margin-left: auto, it pushes to the right. If it has margin: 0 auto, it centers horizontally. But this only works when the flex container has extra space and the child has a defined width. It's a valid technique but is confusing when mixed with justify-content.

Should I use CSS Grid or Flexbox for centering?

Grid with place-items: center is simpler for centering a single element. Flexbox is better when you need to center items within a row or column layout. Both are correct; pick the one that matches the broader layout needs of the component.

Sources

• CSS-Tricks: Centering in CSS -- Comprehensive centering reference
• MDN: CSS Flexbox -- Flexbox specification and examples
• MDN: CSS Grid -- Grid layout specification
• Tailwind CSS Documentation -- Utility-first CSS centering patterns

Explore production-ready AI skills at aiskill.market/browse or submit your own skill to the marketplace.