Aligning text along the center axis can make a page look organized and symmetrical — it can also draw the visitor’s eye to particular elements on the page. For example, titles, block quotes, and call-to-actions 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.

Download Now: Free Intro Guide to HTML & CSS

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.

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 the CSS:

 
* {

text-align: center;

}

Your CSS might also look like this:

 
body {

text-align: center;

}

Here’s the HTML:

 
<h2>How to Center Align Text in CSS</h2>

<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p>

<h2>The Explanation</h2>

<p>Using either the universal selector or type selector <strong>body</strong> and the CSS text-align property set to “center,” everything on the page will be centered.</p>

Here’s the result:

All text, including the headings and paragraphs, are centered with CSS

Image Source

Featured Resource

An Introductory Guide to CSS for Marketers

Fill out the form for your copy of this CSS 101 guide.

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.

Here’s the CSS:

 
h2 {

text-align: center;

}

Here’s the HTML:

 
<h2>How to Center Align Text in CSS</h2>

<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p>

<h2>The Explanation</h2>

<p>Since I’m using the W3Schools Tryit Editor, the default alignment is left. So if you want to change the alignment of the heading text, for example, then you can use a type selector and the CSS text-align property set to “center.” Everything else on the page — in this case, the paragraphs — will remain flushed against the left margin.</p>

Here’s the result:

Only the headings are center aligned on the page with CSS

Image Source

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:

 
#center {

text-align: center;

}

Here’s the HTML:

 
<h2 id="center">How to Center Align Text in CSS</h2>

<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p>

<h2>The Explanation</h2>

<p>To center only one heading on the page, I can add the ID attribute <strong>center</strong> to the opening tag of the element. Then I'll use use the ID selector <strong>#center</strong> and the CSS text-align property set to “center." Only that heading will be centered on the page. The other text will remain left aligned by default.</p>

Here’s the result:

Only one heading is centered on the page using a CSS ID selector

Image Source

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 block-level elements like headings and paragraphs, not inline elements like buttons.

So, first, I’d have to wrap the button in a div. Then I could apply the inline CSS to the div as shown below.

Here’s the HTML with inline CSS:

 
<h2>How to Center Align Text in CSS</h2>

<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. </p>

<h3>The Explanation</h3>

<p>If I want to center an inline element, like a button, then I need to wrap it in a block-level element, like a div first. Only then can I can apply the text-align property to the div. If I  want to center  this div only,  I can use a style attribute that contains the text-align property set to “center.” Everything else on the page will remain flushed against the left margin.</p>

<div style="text-align:center">

<button type="button" class="btn btn-primary">Click Me</button>

</div>

Here’s the result:

Centering text inside a button element using a div and text align property

Image Source

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 set to center to the CSS of any of the examples below.

Vertically Center Text Using CSS Padding

One of the simplest solutions to vertically center 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 the shorthand 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.

Here’s the CSS using the shorthand method:

 
.center {

  padding: 50px 0 50px;

  background: #999FF0;
}

Here’s the HTML:

 
<h2>How to Center Text Vertically</h2>

<p>You can use the padding property to center the text within a div element vertically.</p>

<div class="center">

  <p>I am vertically centered.</p>

</div>

Here’s the result:

Text vertically centered within a div using CSS padding

Image Source

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:

 
.center {

  line-height: 150px;

  height: 150px;

  background: #999FF0;

}

Here’s the HTML:

 
<h2>How to Center Text Vertically</h2>

<p>You can use the line-height property to center the text within a div element vertically.</p>

<div class="center">

  <p>I am vertically centered.</p>

</div>

Here’s the result:

Text vertically centered within a div using CSS line-height property

Image Source

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:

 
   .center {

  position: relative;

  height: 150px;

  background: #999FF0;

}

.center p {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  margin: 0;

}

Here’s the HTML:

 
<h2>How to Center Text Vertically (and Horizontally)</h2>

<p>You can use the CSS position and transform property to center the text within a div element vertically and horizontally.</p>

<div class="center">

  <p>I am vertically and horizontally centered.</p>

</div>

Here’s the result:

Text vertically and horizontally centered within a div using CSS position and transform property

Image Source

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:

 
.center {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 150px;

  background: #999FF0;

}

Here’s the HTML:

 
<h2>How to Center Text Vertically (and Horizontally)</h2>

<p>You can use Flexbox to center the text within a div element vertically. Once you set the div's display property to "flex," set the align-items property to "center" to center the text vertically. To also center the text horizontally, set the justify-content  property to "center."</p>

<div class="center">

  <p>I am vertically and horizontally centered.</p>

</div>

Here’s the result:

Text vertically and horizontally centered within a div using flexbox

Image Source

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 and make your content stand out. If you’re interested in other alignment types, check out How to Left, Right & Center Align Text in HTML.

New Call-to-action

 css introduction

Originally published Nov 9, 2020 7:00:00 AM, updated October 08 2021

Topics:

Bootstrap & CSS