Centering text in HTML
How do you center text in HTML using modern and traditional methods? Learn what tags, CSS properties, and best practices can help you align text horizontally and vertically across different elements and layouts.
Centering text in HTML is a common task that can be achieved using both HTML and CSS. Depending on whether you want to center text horizontally or vertically (or both), there are a few different techniques you can use.
Horizontal Text Centering
Using HTML (Not Recommended for Modern Use)
This text is centered
The tag is outdated and not recommended in HTML5.
Using CSS with text-align
This text is centered
- This is the standard and modern way to center text horizontally.
- Vertical Text Centering
Vertical centering is a bit trickier and usually requires more CSS:
Using Flexbox (Modern and Easy)
Centered Text
- This method centers the text both vertically and horizontally.
- Using Line Height (Simple for Single Line Text)
Centered Text
Works well for single-line text, but not ideal for multi-line content.
Summary:
- Use text-align: center for horizontal centering.
- Use Flexbox for both horizontal and vertical centering.
- Avoid tag — it's obsolete and not supported in HTML5.
With CSS, you have more control and flexibility, so it’s always the preferred way to center text in modern web design.