Example 2: Demonstrating the "Gotcha"

This example highlights the importance of the parent container having a defined height for vertical centering ( items-center ) to work as expected.

Gotcha: Parent WITHOUT Defined Height

The red parent below uses flex items-center justify-center , but has no explicit height. Its height is determined by its content. Notice the inner box is horizontally centered but not vertically within an imaginary larger space.

Item 1

* The item is centered within the space the parent *actually occupies*, which is just the height of the item itself.

Corrected: Parent WITH Defined Height

The green parent below also uses flex items-center justify-center , but crucially has h-48 to give it a fixed height. Now, items-center works as expected for vertical centering.

Item 2