Centering text with text-align is easy, but the common mistake is using it for layout centering when flexbox or grid should own the alignment. Explain inline content vs box alignment and responsive readability trade-offs.
Interview answer drill
Use this CSS interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.
How do you center text horizontally in CSS?Frontend interview answer
Interview focus
This CSS interview question tests whether you can explain Centering text in CSS: text-align, layout mistakes, and when not to use it, connect it to production trade-offs, and handle common follow-up questions.
- Centering text in CSS: text-align, layout mistakes, and when not to use it explanation without falling back to memorized docs wording
- Text and Alignment reasoning, edge cases, and production failure modes
- How you would answer the most likely CSS interview follow-up
Interview quick answer
Full interview answer
Common mistaketext-align: center centers inline content inside a container; it does not magically center every layout problem. The production/debug issue is using text centering for boxes, buttons, or whole sections that actually need flexbox, grid, or auto margins. Start by asking: am I aligning text, or am I aligning a layout object?
Value | Description | Common Use |
|---|---|---|
left | Aligns text to the left edge of the container (default). | Used for most content. |
center | Centers text horizontally. | Used for titles, banners, and centered content blocks. |
right | Aligns text to the right edge. | Used for special design layouts or right-to-left languages. |
justify | Distributes text evenly between margins. | Used in documents or paragraphs for clean edges. |
Example: Centering Text in a Div
HTML
<div style="text-align: center;">
<h1>Welcome to My Website</h1>
<p>This paragraph is centered horizontally within its container.</p>
</div>
All inline content within the <div> — such as text and inline images — will be horizontally centered.
Example: Using an External CSS Rule
CSS
div.container {
text-align: center;
border: 2px dashed #999;
padding: 20px;
}
By applying this rule, any text or inline content inside elements with the 'container' class will appear centered, maintaining clean layout separation from HTML structure.
Important Notes
text-alignaffects inline content, not the container itself.- To center a block-level element (like a
<div>), usemargin: 0 auto;instead. - Combining
text-align: center;withdisplay: flex;offers even more control in modern layouts.
Practical scenario
Center a hero heading and call-to-action text on a landing page.
Common pitfalls
- Centering container instead of text, causing misalignment.
- Ignoring line wrapping and making text hard to read.
- Using
text-alignwhere alignment should be handled by layout.
Centered text can reduce readability for long paragraphs. Test with long strings and responsive widths.
Still so complicated?
Imagine a box filled with text — text-align: center; tells everything inside to stand neatly in the middle of that box.
Summary
- Use
text-align: center;to center text horizontally within a block container. - Applies to inline-level content like text and inline images.
- Combine with flexbox or grid for advanced alignment control.
<li>Does not center block-level elements themselves.Similar questions
Guides
Preparing for interviews?
Use this as one explanation rep, then continue with the CSS interview questions cluster or a guided prep path.