How to Center Text & Headers in CSS Using the Text-Align Property

Centering text with CSS can make your page look organized and symmetrical, while drawing the visitor’s eye to particular elements on the page. For example, headings, block quotes, and calls-to-action are often centered to disrupt the flow of the document and grab the reader’s attention.

That’s why the text CTA below is centered.

To ensure you understand this common alignment type, we’ll walk through how to center text horizontally first. Then we’ll look at a few ways of centering text vertically.

How to Center Text in CSS

To center text in CSS, use the text-align property and define it with the value 'center.' You can use this technique inside block elements, such as divs.

You can also center text in HTML, which is useful if you only want to center individual elements on the page on a case-by-case basis. But if you’re interested in centering an element type, such as all H1s in your blog, it’s better to do it in CSS.

Center-Align Text in CSS

Below, we go over several tutorials for centering text outside and inside other elements.

Centering Text Using the Text-Align Property

Let’s start with an easy example. Say you have a text-only web page and want to center all the text. Then you could use the CSS universal selector (*) or the type selector body to target every element on the page. Then you’d set the text-align property to center.

Here’s what that looks like:

See the Pen Centering Text Using the Text-Align Property by HubSpot (@hubspot) on CodePen.

Here’s a closer look at the result:

Centering an HTML Element Type with the Text-Align Property

What if you don’t want all the text on the page to be centered, or your page contains images and other elements besides text? In that case, you’d use the same text-align property but a different CSS selector.

For example, say you want the headings centered on a page, but the paragraphs to be left-aligned. Then you’d use the type selector h2 and set the text-align property to center. You don’t have to add any more code to align the paragraphs — by default, they’ll be left aligned.

Free Resource

25 HTML & CSS Hacks

Fill out the form for your free coding hacks.

Here’s what that looks like:

See the Pen Centering an HTML Element Type with CSS by HubSpot (@hubspot) on CodePen.

Here’s a closer look at the result:

Centering Individual Elements with a CSS ID

If you’d like to center only a single element on the page, then you can add an ID attribute to the element and target it with an ID selector. Or, you could use inline CSS.

First, let’s use an ID attribute and selector.

Here’s the CSS:

See the Pen Centering Individual Elements with CSS by HubSpot (@hubspot) on CodePen.

Here’s a closer look at the result:

Centering Text Inside a Button Using Inline CSS

Now let’s use inline CSS. But instead of centering headings and paragraphs, let’s center text inside another element.

Say I’m building a web page using Bootstrap CSS and I add a Bootstrap button that I want to center on the page. Aligning the button, and the text inside the button, would differ slightly from the examples above. That’s because the text-align property only works on the content inside block-level elements, such as headings and paragraphs, and not inline elements, such as buttons.

So, first, I’d have to wrap the button in a div. Then I could apply the inline CSS to the div to center-align the content inside the div.

Here’s what that looks like:

See the Pen Centering Text Inside a Button Using CSS by HubSpot (@hubspot) on CodePen.

Here’s a closer look at the result:

Centering a Block Element Using the Margin Property

If you’re centering an entire block element, such as a div, the text-align property won’t work. (Note that it does work when centering the content inside a div.) Instead, you can use the margin property to center the entire element. Here’s what that looks like:

See the Pen Centering a Block Element Using the Margin Property by HubSpot (@hubspot) on CodePen.

Here’s a closer look at the result:

Learn how to center a div in CSS here.

Centering Text Inside a Div

Let’s say you wanted to center a div and also center the text inside it. Like in the previous example, add a “center” ID selector to your chosen div, then set the margin to “auto.” Then, add the “text-align: center” declaration.

Here’s what that looks like:

See the Pen Centering Text Inside a Centered Div by HubSpot (@hubspot) on CodePen.

Here’s a closer look at the result:

As you can tell from the examples above, the text-align property only specifies the horizontal alignment of text. Specifying the vertical alignment of text is more complicated. Let’s take a look below.

Vertically Align Text

You can center text vertically in a number of ways. For the methods below, the text will have to be contained by a parent element, like a div. Let’s start with the easiest.

Note that if you want your text to also be horizontally centered, simply add the text-align property and set it to center in any of the examples below.

Vertically Center Text Using CSS Padding

One of the simplest solutions to vertically centering text is to use top and bottom padding.

To apply CSS padding to an element, I can use the long form method and define both the padding-top and padding-bottom properties in my CSS. Or I can use CSS shorthand on the padding property and include three values: the first value will represent the top padding, the second will represent the left and right padding, and the third will represent the bottom padding.

Below is the CSS code using the shorthand method:

See the Pen Vertically Center Text Using CSS Padding by HubSpot (@hubspot) on CodePen.

Here’s the result:

Vertically Center Text Using the CSS Line-Height Property

To vertically center text within an element, you can also use the CSS line-height property. You’ll have to set the property with a value that is equal to the container element’s height.

Here’s the CSS:

See the Pen Vertically Center Text Using the CSS Line-Height Property by HubSpot (@hubspot) on CodePen.

Here’s the result:

Vertically Center Text Using the CSS Position and Transform Properties

Another method for centering text vertically on a page requires the CSS position property and the transform property.

To start, set the position of the div containing the text to relative. Then you want to style the paragraph within the div. First, set its position to absolute so that it’s taken out of the normal document flow. Then set the left and top properties to 50%. This tells the browser to line up the left and top edge of the paragraph with the center of the page horizontally and vertically (ie. 50% to the right and down the page). The problem is we don’t want the edges of the paragraph to be lined up in the middle of the page — we want the center of the paragraph to be lined up in the middle of the page.

That’s where the CSS transform property comes in. Using the transformation method known as the translate() method, we can move the paragraph along the X- and the Y-axis. To truly center the paragraph, we want to move it 50% to the left and up from its current position. That will tell the browser to put the center of the paragraph in the center of the page.

Here’s the CSS:

See the Pen Vertically Center Text Using the CSS Position and Transform Properties by HubSpot (@hubspot) on CodePen.

Here’s the result:

Vertically Center Text Using Flexbox

Flexbox is one of the best methods for vertically (and horizontally) centering text, since it’s responsive and doesn’t require margin calculations.

First, you need to define the parent container — in this case, the div — as a flex container. You do this by setting the display property to “flex.” Then, define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.

Here’s the CSS:

See the Pen Vertically Center Text Using Flexbox by HubSpot (@hubspot) on CodePen.

Here’s the result:

Should you use inline, internal, or external CSS to center text?

As you consider your different options for centering text using CSS, you might wonder whether it’s better to use inline, internal, or external CSS.

Inline CSS is included in the opening tag of an element, as follows:

 <p style=”align-text: center”>

Internal CSS is included between the <style> tags in the header of your HTML document, as follows:

 
<html>
<head>
<style>
body {
align-text:center
}
</style>
</head>

External CSS refers to CSS in the external stylesheet that you link to in the head tag of your HTML document.

So, which one of these options works for you?

If you’re centering a one-off element on a blog post or page, stick to inline CSS. That way, you don’t have to create a CSS class or ID just for that element, which you’d then have to add to your stylesheet.

If you’re centering an element type on one specific page, you can use internal CSS to center that element without going one-by-one. Just be sure to choose the right CSS selector so that your changes apply.

If you’d like to center a type of element across your entire website, use the external stylesheet.

Centering Text on your Website

If you have some basic knowledge of HTML and CSS, you can easily center text on your web pages. This can help you build custom page layouts, make your content stand out, and engage users as they scroll through your website.

Editor's note: This post was originally published in November 2020 and has been updated for comprehensiveness.