How to Align Text Vertically Center Using CSS

Last Updated on January 26, 2021 by Roshan Parihar

In this tutorial, learn how to align text vertically center using CSS. The short answer is: use the vertical-align property of CSS. You can use some other CSS properties given here to center align text vertically.

Let’s find out with the useful examples given below.

Align Text Vertically Center with CSS vertical-align Property

To align text vertically center, you can use CSS property vertical-align with center as its value. You also need to use display:table-cell property of CSS to make text vertically center.

Add some width and height to the div element and align text horizontally center also. To make text horizontally center, you have to use text-align:center.

Test it Live

Output

This is the Vertically Aligned content.

The above example contains the div element with some background color. The text in the div element is in the required position.

Below are some other methods that are given for text alignment in the vertical center position. But this method is the best method you can use to make text vertically center.

Vertically Align Text Center with CSS line-height Property

You can use the CSS property line-height to align the text center in a div. Use the same value for this property as you will give for the height of the div.

If the text contains more than one line, it may take another line out of the box. To make text looks properly arranged, you may also have to use text-align:center.

note: Use this method only when you have single line text content.

Test it Live

Output

Vertically Aligned.

The above example center aligns only single-line text content. Add some more lines to the above text content. The other lines may visible outside of the div element.

Using CSS Top and Bottom Padding for Vertical Alignment

In addition to the above all methods, you can use CSS padding property for top and bottom. You don’t need to use the height for the div element. It requires only to use them padding-top and padding-bottom property for making the div height correct and center align text vertically.

Test it Live

Output

This is the Center content.

The above example contains the padding-top and padding-bottom for vertically center alignment. Also, you can apply some width to the div element to make a box.

I hope you like this tutorial on how to make text vertical alignment centrally using CSS.