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 the text-align property. Then, we'll walk step-by-step through how to center text horizontally and vertically.

CSS Text-Align Property

The CSS text-align property is a rule that centers text horizontally inside a block element. The syntax looks as follows:

With that in mind, let's go over the myriad ways you can use the text-align property to center text in CSS.

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. Here's how:

• Open up your CSS file.
• Type the universal * selector and open up the style brackets.
• Then, 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:

You can use this with other selectors, such as p or body, or any of the heading elements, which we'll look at below.

Centering a Header in CSS

To center a header in CSS, we apply the same steps as above, except we use one of the heading selectors, such as h1, h2, h3, h4, and so on. Here's how:

• Open up your CSS file.
• Type your chosen heading selector, such as h1, h2, h3, or more, and open up the style brackets.
• Then, set the text-align property to center.

See the Pen How to Center Text in CSS - headings by HubSpot (@hubspot) on CodePen.

If you want to center multiple heading types, you can set the selector to: h1, h2, h3, h4 { text-align: center; }.

If you want to center only a specific group of headings:

• Create a CSS class and apply it to the headings you'd like to center.
• For instance, you might give certain H2s the class "highlight," ie <h2 class="highlight">.
• Open your CSS file.
• Type the class selector, .highlight, and open your style brackets.
• Then, set the text-align property to center.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

• Expert advice on how to build a portfolio
• Top programming languages to learn
• Resume building and interview tips
• Resources to strengthen communication skills

Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now

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.

We'll use the h2 example again.

For example, say you want the H2 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.

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 on an H2 heading. Here's how:

• Create a CSS ID and apply it to the heading you'd like to center.
• Here, we'll be using the ID "center," ie <h2 id="center">.
• Open your CSS file.
• Type the ID selector, #center, and open your style brackets.
• Then, set the text-align property to center.

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 here's what we'll do instead:

• Open your HTML file.
• Wrap the button in a div.
• Then, add an inline style declaration to the opening tag of the div, i.e. <div style="[insert style rules]">.
• Finally, inside the quote marks, set the text-align property to center.

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 how:

• Open your CSS file.
• Locate the CSS selector for your desired block element, or create it.
• Open up the style brackets.
• Declare a width for your element, i.e width: 400px;.
• Then, set the margin to auto.

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.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

• Expert advice on how to build a portfolio
• Top programming languages to learn
• Resume building and interview tips
• Resources to strengthen communication skills

Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now

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.

• Next, let's 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 of the paragraph 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:

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

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?

I would recommend putting as much CSS as possible into an external stylesheet. It keeps your HTML clean and it's generally best practice for web developers.  

However, sometimes you need to use inline styling. Like if you’re centering a one-off element on a blog post or page, you might want to use 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, this is where an external stylesheet really comes in handy.

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.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

• Expert advice on how to build a portfolio
• Top programming languages to learn
• Resume building and interview tips
• Resources to strengthen communication skills

Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now