html

How to Center Text Vertically in CSS

CSS provides various alignment styles, such as left, right, center, justified, horizontal and vertical, for different types of content. More specifically, for heading and short lines, the “center” alignment style is used. Using this style, the appearance of content can be enhanced, and it will look neat.

This article will explain various methods to center text vertically. So, let’s start!

How to Center Text Vertically in CSS?

There are many ways to center text vertically, such as “flexbox”, “line-height”, “padding”, “transform”, and the “float” property. In this section, we will learn about some of the mentioned properties to center text vertically in CSS. But before that, we will show the procedure of center aligning text.

Example

In the <body> of HTML, we will create an container with <div> class named “center” and inside it create a heading using <h1> tag:

<body>

<div class="center">

<h1>"Act without expectation"</h>

</div>

</body>

After that, move to the CSS file and style the <div> you created in the HTML file.

Here “.center” is used to access the class we assigned to the <div>. Next, we will set the width of the created container to “450px” and the height to “200px”. We also set the border of <div> using the “border” property and assign the value of border “10px” and “double”:

.center {

width: 450px;

height: 200px;

border: 7px double;

}

After the implementation of the above code, we get the following outcome:

Here, we see that the text is shown at the top left corner of the screen. Now, we move to the next step, in which we will describe different methods to center text vertically using CSS.

Method 1: Center Text Vertically in CSS Using flex

CSS “flex” is the value of the “display” property. It is used to set content or elements according to their viewport size. It allows CSS elements to arrange efficiently by creating equal space between them.

Syntax

display: flex

So, let’s continue the previous example to centralize the text vertically.

Example

To set the position of text in the center and vertical, we will assign the value of display property as “flex” and align-items as “center”:

.center {

width: 450px;

height: 200px;

border: 7px double;

display: flex;

align-items: center;

}

This will give us the following outcome:

Here, we can see that our text is vertically aligned and also in the center of the div. Now, we will move to the second method.

Method 2: Center Text Vertically in CSS Using line-height Property

The “line-height” property specifies the height between two lines within the elements. It is used to create space between two lines having text.

Syntax

Syntax of the line-height property is given as:

line-height: value

In the above-given syntax, we will specify the height of the line as “value”.

Note: In the line-height property, we cannot give a negative value.

Example

Now, we will utilize the line-height property to set text in the vertical center of the <div>. To do so, in the CSS file, set the value of the line-height property to “150px”:

.center {

width: 450px;

height: 200px;

border: 7px double;

line-height: 150px;

}

This will give us the following outcome:

Method 3: Center Text Vertically in CSS Using padding

To create space between an element’s border and its content, the “padding” property is used. It is a shorthand property of CSS that can be utilized to set the padding from all sides in a single line.

Syntax

The syntax of the padding property is:

padding: top right bottom left

Here is the description of the above-given values of the mentioned property:

  • top: It is used to create space from the top.
  • right: It is used to create space from the right.
  • button: It is used to create space from the bottom.
  • left: It is used to create space from the left.

Note: Specifying two values will signify the padding from top & bottom and padding from left & right; however, if one value is added, padding will be applied to all four sides.

Example

Here, we will set the value of padding as “10%” and “0%”, where the first value indicates top and bottom padding and the second indicates padding from left and right. Moreover, we only want to centralize text vertically so, we will set the second value to “0”:

.center {

border: 7px double;

padding: 10% 0;

}

After the implementation of the given code, go to the HTML file, run it, and check the following output:

We have provided different methods related to center aligning text vertically in CSS.

Conclusion

To center text vertically, use the “flexbox”, “line-height” and “padding” properties of CSS. These properties allow you to set the height within the content and element’s border. In this article, we explain how to center text vertically using three different methods and provide an example of each method.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.