Gotcha: text-center vs. Block Centering ( mx-auto )

The text-align utilities ( text-left , text-center , text-right ) control the alignment of text inside a block-level element. They do not center the block element itself on the page.

Demonstrating the Gotcha

Text centered in this red box (using text-center ).

Notice how this red box is not centered on the page , even though its text content is centered. This is because text-center only affects inline content within the block. The block itself (this red div) needs mx-auto to be centered.

Correct Approach: Centering Block and Text

Text centered in this green box (using text-center ).

This green box IS centered on the page using mx-auto on the box itself. The text inside is also centered using text-center .

text-center on a Full-Width Block

This text is centered in a full-width blue box .

When an element like this div naturally spans the full width of its container, text-center will make its content appear horizontally centered relative to the page. No mx-auto is needed on the block if it's already full-width.