The
text-center
utility aligns text *within* its block-level container. It does not center the container itself on the page.
This div has a width (
w-1/2
) and
text-center
. The text inside is centered, but the div itself is not centered on the page.
Div with
text-center
My text is centered, but I (the red box) am not!
Notice the red box is left-aligned within this section.
This div uses
mx-auto
to center the block itself, and
text-center
to center its internal text content.
Div with
text-center
and
mx-auto
My text is centered, AND I (the green box) am centered!
Notice the green box is now centered on the page.
text-left
,
text-center
,
text-right
: Align text
within
an element.
mx-auto
: Centers a
block-level element itself
horizontally within its parent, provided it has a defined width (or is an inline-block with a width).