Gotcha: Text Alignment vs. Block Centering

The classes text-left , text-center , and text-right align the text *within* its own block-level container. They do not center the block element itself on the page.

Attempting to Center a Block with text-center Alone (Incorrect for block)

This div has w-3/4 and text-center .

The text inside this orange box is centered.

However, the orange box itself is aligned to the left (its default block layout position) within its parent.

It is NOT centered on the page.

To center the orange block above, you need to add mx-auto to it.

Correctly Centering a Block and its Text

This div has w-3/4 , mx-auto , and text-center .

The green box is centered on the page due to mx-auto .

The text inside this green box is centered due to text-center .

Here, mx-auto centers the block element (the green box), and text-center centers the text content within that block.

Key Takeaway for the "Gotcha":