Tailwind Align Items

What Does align-items Control?

items-* utilities map to the CSS align-items property, controlling how items align on the cross axis. In a flex-row container, that means vertical alignment; in a flex-col container, it means horizontal alignment.

items-center is one of the most frequently used Tailwind utilities overall, since vertically centering content was historically one of the hardest problems in CSS before flexbox.

<div class="flex h-24 items-center gap-3 rounded-lg border p-4">
  <img class="h-12 w-12 rounded-full" src="/avatar.jpg" alt="" />
  <div>
    <p class="font-semibold">Name</p>
    <p class="text-sm text-slate-500">Title</p>
  </div>
</div>

Even though the avatar and text block are different heights, items-center vertically aligns them both to the middle of the row.

Align Items Syntax

class="items-start | items-end | items-center"
class="items-baseline | items-stretch"

• items-start/items-end align items to the beginning or end of the cross axis.
• items-center centers items along the cross axis.
• items-baseline aligns items by their text baselines, useful for mismatched font sizes.
• items-stretch (the default) stretches items to fill the container's cross-axis size.

Align Items Cheatsheet

Cross-axis alignment values, plus per-item overrides.

items-* vs self-*

items-* is set on the flex/grid container and applies to every child by default. self-* is set on an individual child and overrides the container's alignment for that one item only.

<div class="flex h-32 items-center gap-4">
  <div class="rounded bg-slate-100 p-3">Centered</div>
  <div class="self-start rounded bg-slate-100 p-3">Aligned to top</div>
  <div class="self-end rounded bg-slate-100 p-3">Aligned to bottom</div>
</div>

Every item defaults to items-center from the parent, except the two with their own self-* override.

The Vertical Centering Recipe

To center content both ways inside a box, regardless of the box's height, combine a fixed or flexible height with flex items-center justify-center. This single pattern replaces older CSS tricks involving absolute positioning and negative margins.

<div class="flex h-screen items-center justify-center">
  <div class="rounded-lg bg-white p-8 shadow-lg">
    Perfectly centered dialog
  </div>
</div>

Aligning Mismatched Text Sizes With items-baseline

items-baseline is especially useful when a row mixes different font sizes, like a price and its currency label, and you want their text to sit on the same visual baseline instead of centering their full line-heights.

<div class="flex items-baseline gap-1">
  <span class="text-4xl font-bold">$29</span>
  <span class="text-sm text-slate-500">/month</span>
</div>

Common Mistakes

• Confusing items-* (cross axis) with justify-* (main axis), especially after changing flex-direction.
• Using items-center when items-baseline would produce cleaner text alignment for mismatched font sizes.
• Forgetting the container needs a defined height (or flexible height like h-screen) for vertical centering to be visible.
• Applying self-* on an element whose parent isn't a flex or grid container, which has no effect.
• Assuming items-stretch (the default) will make all items equal height when a min-h-*/content constraint is actually needed too.

Key Takeaways

• items-* utilities control cross-axis alignment for every child in a flex or grid container.
• self-* utilities override alignment for a single child, independent of the container's items-* setting.
• items-center combined with flex and a defined height solves vertical centering cleanly.
• items-baseline aligns text by baseline, ideal for rows mixing different font sizes.
• Cross-axis meaning flips between vertical and horizontal depending on flex-direction.