Example 2: Demonstrating the "Gotcha" for Vertical Centering

Gotcha: Parent Without Defined Height

If the parent container (gray box below) does not have a defined height (e.g., h-32 , min-h-screen ), items-center (for vertical centering) will only center the item within the parent's content height. The parent's height here is determined solely by its child's content.

Item

(Parent has NO explicit height)

Parent height is just enough for this line and the red box.

Notice how the "Item" box is vertically centered relative to the (small) height of its parent, not a larger predefined area. It is horizontally centered correctly by justify-center .

Corrected: Parent With Defined Height

When the parent container (green box below) has a defined height (e.g., h-48 ), items-center works as expected, vertically centering the child within that explicit height.

Item

(Parent has h-48)

Here, the "Item" box is perfectly centered both vertically and horizontally within the h-48 parent.

Key Takeaway (Gotcha Explained):

The items-center class aligns flex items along the cross-axis (vertically, by default). For this to have a visible effect of centering within a "larger space", that space (the parent container's height) must be larger than the content itself. If the parent's height is not explicitly set (e.g., via h-XX , min-h-XX , or if it's an element that naturally takes up more space like min-h-screen on the body), it will shrink-wrap its content. In such a scenario, items-center technically still works, but the "center" is just the center of that shrink-wrapped height, which might not be what you visually expect.