There are several ways to center text both vertically and horizontally inside a container. The best method depends on whether the container has a fixed height or uses flexible layout systems like Flexbox or Grid.

Common Methods for Centering Text

1
Using Flexbox: Set the container to display: flex, then use justify-content: center for horizontal alignment and align-items: center for vertical alignment.
2
Using Grid: Set the container to display: grid and use place-items: center to center content both vertically and horizontally.
3
Using Positioning: With position: relative on the container and position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) on the text, you can center it regardless of container size.
4
Using Line Height: For single-line text in a fixed-height box, set line-height equal to the container height to center vertically and use text-align: center for horizontal centering.

Example: Flexbox Centering

Example: Grid Centering

Example: Absolute Positioning Centering

These methods allow precise vertical and horizontal centering, whether you have dynamic content, multiple lines of text, or responsive layouts.

Key Takeaways

1
Flexbox and Grid are the most flexible and recommended methods for centering content.
2
Absolute positioning works well for fixed-size containers or overlay elements.
3
Line-height method is limited to single-line text with a fixed container height.
4
Always test centering in responsive scenarios to ensure consistent alignment.

Scenario Questions

0-2 years experience

1You have a <div class="card"> that contains a single <p>. Write the CSS needed to center the paragraph both vertically and horizontally inside the card.
2If you try to vertically center the text by setting line-height equal to the container height, what happens when the paragraph wraps onto multiple lines?
3What does applying only text-align:center do to the text inside a fixed‑height box?

2-5 years experience

1We need a label centered inside a button whose width and height change based on its content. Which CSS layout method would you pick and why?
2After adding a 2px border to the container, the text stopped appearing centered. Walk me through how you’d debug that issue.
3Our design system mixes Flexbox and Grid. How would you decide which to use for a reusable Card component that must center its title text?

5-8 years experience

1Our page renders thousands of cards in a virtualized list. Discuss any performance implications of using Flexbox versus Grid for centering text in each card.
2The legacy codebase uses absolute positioning to center text. Propose a migration plan to modern CSS while avoiding layout shifts across browsers.
3How would you make the centering solution robust for right‑to‑left languages and for users who increase the base font size?

8+ years experience

1We are merging UI libraries from three product teams into a single design system. How would you define a centering utility that works across React, Angular, and plain HTML, and what governance would you put in place to keep implementations consistent?
2If we must also support email clients that only understand table‑based layouts, how would you reconcile that with our modern CSS centering approach across the platform?

Follow-up Questions

What edge cases does your solution need to handle?
How would you verify it works across major browsers and devices?
What trade‑offs did you consider when choosing Flexbox vs Grid?

Sharethis question

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.