How to Center Text in HTML
What you’ll build or solve
You’ll center text horizontally inside a page or specific section using modern CSS.
When this approach works best
Centering text works best when you:
Learn HTML on Mimo
- Align headings in hero sections.
- Center short labels inside cards or banners.
- Create symmetrical landing page layouts.
- Improve visual balance in simple UI sections.
This approach is a bad idea if you use the old <center> tag or confuse text alignment with positioning entire elements.
Prerequisites
- A code editor
- A browser
- Basic understanding of HTML and CSS selectors
No additional setup is required.
Step-by-step instructions
Step 1: Center text with text-align
The correct way to center text horizontally is the text-align property.
You can apply it to the whole page:
PHP
<!doctype html>
<htmllang="en">
<head>
<metacharset="utf-8"/>
<title>Center text</title>
<style>
body {
text-align:center;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<p>This text is centered.</p>
</body>
</html>
Or apply it to a specific section:
JavaScript
<sectionclass="hero">
<h2>Hero section</h2>
<p>Centered inside this block.</p>
</section>
<style>
.hero {
text-align:center;
}
</style>
The technique stays the same. You control what gets centered by changing the selector.
What to look for:
text-alignworks on block-level containers likediv,section, orbody.- Apply it to the parent element to center the text inside it.
- If you want to center the container itself, not just its text, use Flexbox or Grid.
Step 2: Use inline styles for quick tests
Inline styles work for one-off changes or quick experiments.
CSS
<pstyle="text-align:center;">
Temporary centered text
</p>
If you repeat the same style more than once, move it into a class:
<pclass="centered">First</p>
<pclass="centered">Second</p>
<style>
.centered {
text-align:center;
}
</style>
Examples you can copy
Example 1: Centered hero heading
JavaScript
<headerclass="hero">
<h1>Product Launch</h1>
<p>Coming soon</p>
</header>
<style>
.hero {
text-align:center;
padding:3rem;
}
</style>
Example 2: Center only one heading
JavaScript
<h1class="title">Centered heading</h1>
<p>Regular paragraph text.</p>
<style>
.title {
text-align:center;
}
</style>
Example 3: Center card text while keeping layout separate
JavaScript
<divclass="wrapper">
<divclass="card">
<h2>Login</h2>
<p>Enter your details</p>
</div>
</div>
<style>
.wrapper {
display:flex;
justify-content:center;/* Centers the card container */
}
.card {
text-align:center;/* Centers text inside the card */
padding:2rem;
border:1pxsolid #ddd;
}
</style>
In this example:
- Flexbox centers the card element.
text-aligncenters the text inside the card.
Common mistakes and how to fix them
Mistake 1: Using the <center> tag
What you might do
PHP
<center>Text</center>
Why it breaks
The <center> tag is deprecated and not part of modern HTML standards.
Fix
JavaScript
<pclass="centered">Text</p>
<style>
.centered {
text-align:center;
}
</style>
Mistake 2: Applying text-align to an inline element
What you might do
CSS
span {
text-align:center;
}
Why it breaks
Inline elements do not control the alignment of surrounding content.
Fix
Apply it to a block-level parent:
CSS
div {
text-align:center;
}
Mistake 3: Expecting vertical centering from text-align
What you might do
CSS
.box {
text-align:center;
}
Why it breaks
text-align only affects horizontal alignment. It does not vertically center content.
Fix
Use layout techniques such as Flexbox when you need vertical centering:
CSS
.box {
display:flex;
justify-content:center;
align-items:center;
}
Troubleshooting
If text does not center, confirm the selector targets the correct parent element.
If styles appear ignored, check for more specific CSS rules overriding yours.
If only part of the text centers, inspect nested containers.
If layout shifts unexpectedly, verify you are not mixing text alignment with element positioning.
If nothing changes, confirm your CSS file is linked correctly.
Quick recap
- Use
text-align: center;to center text horizontally. - Apply it to the parent container.
- Avoid deprecated tags like
<center>. - Use inline styles only for quick tests.
- Use Flexbox or Grid when you need to center containers, not just text.
Join 35M+ people learning for free on Mimo
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot