How to Center Text in CSS – Quickly and Efficiently

How to Center Text in CSS

In this article we will be discussing how to center text in CSS, both, Horizontally as well as Vertically using CSS Styling

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. This is mostly done on Titles, block quotes and more.

Centering the text is one of the most frequently used styling in CSS, but if you are not sure how to do that, don’t worry, we’ve got you covered.

How to Center Text in CSS Horizontally

HTML

Let’s start off by typing in the HTML Code

<h2>This is the Heading</h2>
<p>This is the Paragraph</p>

And the result,

Since we added no CSS Styling, by default, the text is aligned to the Left

CSS

Now we use the text-align property in order to align the text where we wish.

<h2 style="text-align:center;">This is the Heading</h2>
 
<p>This is the Paragraph</p>

Great, just what we wanted.

But, if we wanted all the h2 elements to be centered, we need to take another approach

We have to provide a separate CSS file to do this

At this point we just remove the style property, and introduce it to the CSS file

<h2>This is the Heading</h2>
 
<p>Paragraph</p>

<h2 >This is another Heading</h2>

h2 {
   text-align:center;
}

In Simple words, we say, just go ahead and give all the h2 elements a text-alignment as Center

How to Center Text in CSS using Classes

Let’s just say you want to center text for some of the h2 elements, and not all.

In this case, we must use classes.

Time to create a new class! Define a class named center that holds the property of text-align as center.

.center {
   text-align:center;
}

Now we use the center class for the First heading and not the Second

<h2 class = "center">This is the Heading</h2>
 
<p>Paragraph</p>

<h2 >This is another Heading</h2>

Just as Expected, we have the first heading at the center and the second heading at the left

How to Center Text in CSS Vertically

You can center text vertically in a number of ways. Here, we use vertical-align property to vertically align the text at the center.

How to Center Text in CSS Vertically

Lets now redefine the center class that now holds the CSS property of vertical-align, with value middle.

.center {
   vertical-align: middle;
}

Now we use the center class for the heading.

div class="center">
     
   <h2>This is the Heading</h2>

</div>

To Sum Up

In today’s post, we’ve discussed How to Center Text in CSS, horizontally and vertically using the text-align and vertical-align properties. If you are on your way to becoming a Web-developer, you might find our site really helpful. Hit this link for more CSS related posts
Check it out, it’s Simply the Best Code.