How To Center Text In HTML?

Alright—centering text sounds simple. And sometimes, it is. But depending on your page layout, container types, or the weird little quirks of browsers, there’s actually a few ways to approach it. Some better than others.

Over the years, I’ve had countless clients ask: “Why is this text not centered properly?”

Well. Let’s run through the main ways you can center text in HTML and CSS. I’ll keep it practical, like I would if we were mapping it out on a whiteboard.

The Basics: HTML vs CSS

First up. HTML on its own doesn’t give you much. CSS is where all the heavy lifting happens.

Technically, HTML does have a <center> tag (more on that in a sec), but in 2025? You want to avoid that. CSS gives you better control, it plays nicer with responsive designs, and it keeps your code tidy for the long haul.

5 Solid Ways To Center Text

1) The Old <center> Tag (Don’t Do This… Anymore)

Yeah, back in the early 2000s, we all used:

It worked. It still technically works. But it’s been deprecated for years now. Google won’t like it. Screen readers don’t love it. And if you’re building anything modern (which you should be), you want to avoid leaning on old-school tags like this.

2) The Quick & Easy text-align: center;

This one still works great for simple horizontal centering.

3) Flexbox — My Personal Go-To

Flexbox is a bit of a game changer. When I was working on a site for a client called EcoFit last month, we used Flexbox to handle all their call-to-actions across mobile and desktop. Zero headaches.

Here’s a full center (both horizontal and vertical):

• justify-content: center handles horizontal

• align-items: center handles vertical

• And height: 100vh makes sure it takes up the full viewport

Perfect for hero banners, landing pages, or full-screen modals.

4) CSS Grid — Super Clean For Complex Layouts

Grid is Flexbox’s cooler cousin. Similar idea, slightly different vibe.

• place-items: center is shorthand for both vertical and horizontal centering.

• I tend to use Grid when I’m dealing with multi-column layouts or more complex page structures.

We used this recently for a client’s product catalog where Flexbox was just getting messy.

5) The margin: auto Trick

Sometimes, you’re just trying to center a block-level element. This still works like a charm—as long as you give the element a width.

• The browser automatically calculates the left and right margins.

• Great for cards, containers, or images where you don’t need full viewport alignment.

Some Real-World Considerations

Before you pick your method, let’s touch on a few things I always remind my team:

• Responsiveness matters: Flexbox and Grid handle screen sizes better. Don’t break your layout on mobile.

• Vertical centering used to be a nightmare: Flexbox and Grid basically solved that.

• Accessibility isn’t optional: Don’t center huge blocks of text just because it “looks nice.” Think readability.

• Avoid hard-coding absolute positions: Unless you love debugging for hours. Seriously.

So… Which Method Should You Use?

Honestly? Depends on the situation.

• Quick headings? Use text-align: center.

• Full-page layouts? Flexbox or Grid.

• Block containers? margin: auto still holds up.

Most of my own builds default to Flexbox first. It just handles the most common use cases with minimal code.

If you’re still stuck—or if your layout just isn’t playing nice—sometimes it’s worth having a pro take a look. At Chromatix, we’ve been wrangling HTML, CSS, and everything in between for years. We can make sure your text sits where it should—and more importantly, help your whole site convert better.

By the way — what’s your most frustrating centering issue you’ve hit lately?