Container utility for centering in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

Center a div horizontally using Tailwind

You want to center a <div> horizontally inside its parent container using Tailwind CSS. Which utility class should you add to the div?

Tailwind

<div class="?">Centered content</div>

A text-center

B my-auto

C mx-auto

D items-center

💡 Hint

Think about margin utilities that control horizontal spacing.

Using mx-auto sets the left and right margins to auto, which centers the block horizontally inside its parent container.

my-auto centers vertically if the parent has a fixed height and flexbox. text-center centers inline text, not the block itself. items-center is for flex container alignment.

❓ layout

intermediate

Vertically and horizontally center content with Tailwind

You want to center a <div> both vertically and horizontally inside a parent container using Tailwind CSS. The parent has a fixed height. Which set of classes on the parent will achieve this?

Tailwind

<div class="?" style="height: 300px;"><div>Centered content</div></div>

A flex justify-center items-center

B block mx-auto my-auto

C flex justify-center my-auto

D grid place-items-center

💡 Hint

Use flexbox utilities that align items both ways.

flex justify-center items-center makes the parent a flex container that centers children horizontally and vertically.

grid place-items-center also centers but is a grid approach (valid but not the correct answer here).

my-auto alone won't center vertically without flex or grid. block mx-auto my-auto won't center vertically.

❓ selector

advanced

Which Tailwind class centers text inside a container?

You want to center the text inside a <div> horizontally. Which Tailwind utility class will do this?

Tailwind

<div class="?">This text should be centered</div>

A text-center

B mx-auto

C items-center

D justify-center

💡 Hint

Think about text alignment utilities.

text-center centers inline text horizontally inside the container.

mx-auto centers block elements horizontally by margin. items-center and justify-center are flexbox alignment utilities and do not affect text alignment directly.

❓ accessibility

advanced

Accessible centering of main content with Tailwind

You want to center the main content both vertically and horizontally on the page using Tailwind CSS. Which approach ensures the content is centered and accessible with proper semantic HTML?

Tailwind

<main class="?">Main content</main>

A flex justify-center items-center min-h-screen

B flex justify-center items-center h-screen

C grid place-items-center h-full

D block mx-auto my-auto h-screen

💡 Hint

Use full viewport height and flexbox for centering.

flex justify-center items-center h-screen makes the <main> fill the viewport height and centers content both ways using flexbox.

min-h-screen sets minimum height to the viewport height but allows the element to grow taller if needed. h-full requires parent height set. block mx-auto my-auto won't center vertically.

Using <main> is semantic and good for accessibility.

🧠 Conceptual

expert

Why does mx-auto center block elements but not inline elements?

In Tailwind CSS, the utility mx-auto centers block elements horizontally by setting left and right margins to auto. Why does this not work to center inline elements like <span>?

A Because <code>mx-auto</code> sets padding, not margin, which inline elements ignore

B Because <code>mx-auto</code> only works inside flex containers

C Because inline elements have fixed width and cannot be centered

D Because inline elements ignore margin properties and need text alignment instead

💡 Hint

Think about how inline elements handle margins and alignment.

Inline elements do not respect horizontal margins the same way block elements do. To center inline content, text alignment utilities like text-center on the parent container are used.

mx-auto sets left and right margins to auto, which works only for block or flex items with width.