Center align text using CSS

Use the text-align property to align texts. In this post, I will give you many examples of centering text, headers/headings. Also, I will show you multiple ways to center them.

Let’s get started.

Table of Contents show

Most common ways to make text and other elements center aligned

Aside from the text-align CSS properties, you can also use different approaches and technics to center-align text and other HTML elements (depending on the situation). Such as using Flexbox, Grid, Position & Transform, etc.

However, here are the most common examples & ways to make the text center aligned.

p {
	text-align: center;
}
div {
	text-align: center;
}
.container {
	text-align: center;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod eempor incididunt ut.

Do you want to align the text vertically centered? See vertically centered text.

An efficient way to write CSS for centering text

To maximize productivity, you have to write less code and do more.

At the top of your CSS file, choose a class name whatever you like, and write the CSS to center the text. For example-

.t-center {text-align: center;}
/* write this on your CSS file once */
/* and use this class name (.t-center) on your HTML as much time you need. */
/* And you can follow this same process for other elements */
/* such as image, iframe, etc */
.i-center {max-width: 900px; display: block; margin: 0 auto;}
/* for centering images */

By doing this once, you can apply this class name as many times on your HTML. For example-

<section>
	<h2>This is a heading</h2>
	<p class="t-center">This is a paragraph.</p>
	<img class="i-center" src="image.jpg" alt="photo">
	<p>This is also a paragraph that is not centered.</p>
</section>

Centering text in a given width

Imagine a situation where you have to center-align a paragraph that has to be 300 pixels in width.

Distinctio amet saepe illum illo placeat voluptatibus facilis eveniet ea? Similique rem recusandae ut quam minus, blanditiis beatae delectus itaque quaerat odio.

p {
	width: 300px;
	margin: 0 auto;
	text-align: center;
}
/* If you do not assign the margin: 0 auto; the text will be centered itself 
but it (white box) will stay on the left side of the div/container. */

The paragraph or p-tag is already a block-level element by born, so you don’t have to assign “display: block.”

How to center a header/heading in HTML?

You can use the same CSS text-align property to align a heading text (h1 – h6). To make a heading text center, write the following CSS.

h1 {
  text-align: center;
}

In the above example, I used the <h1> tag but it could be anything e.g. h2, h3, … h6, or whatever the specific heading text you want to center align.

If you want to center-align multiple HTML elements, you can write them comma-separated (as you see below).

h1, h2, h3, h4, h5, h6 {
  text-align: center;
}

So you don’t have to write the same CSS over & over.

Other ways to make headings center

If you don’t want to write CSS in a separate file, you can also center align header text by using HTML align attribute and inline or embed CSS. See each of the examples below.

Using the HTML align attribute

<h3 align="center">This is an example heading</h3>
/* using the align attribute directly in HTML */

Using inline CSS directly in the HTML file

<h4 style="text-align: center">This is an example heading</h4>

Using embed CSS directly in the HTML file

<style>
  h5{text-align: center;}
</style>
<h5>This is an example heading</h5>

Learn more about centering HTML elements

Conclusion

You can also use the text-align property to align the text in the left (default), right, and even justify. For example text-align: right or texta-align: justify. If you do not assign any text-align property, by default the value is left.

I gave you many examples and showed you different use cases for centering text horizontally. If you want to learn to center them vertically, I linked another post above that you can check (also centering other HTML elements).

If you have any confusion or questions, please let me know.