How to Center Text Vertically in CSS

1. Use the line-height Property to Center the Text Vertically in CSS
2. Use the display, vertical-align and line-height Properties to Center the Text Vertically in CSS
3. Simulate the Table Display to Vertically Center the Text in CSS

This article will introduce methods to center the texts vertically in CSS.

Use the line-height Property to Center the Text Vertically in CSS

We can set the height of the line-height property as the div to center the text vertically in CSS. The line-height property specifies the height of a line. It can be illustrated by creating a border of the div element. We can also use the text-align property and set it to center to align the text to the center horizontally.

For example, create a div in HTML and write the text Hello World! in between. Next, in CSS, set the height of the div to 200px. Also, set the line-height to the same value. Align the text to center with the text-align property. Create a solid border of 3px width in black color using the border short-hand property.

In the example below, we have set the same pixels of line-height and height of the div. Thus, it centers the text vertically. However, this method only works for single-line texts.

Example Code:

<div>
    Hello World!
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}

Use the display, vertical-align and line-height Properties to Center the Text Vertically in CSS

We can center the text in multiple lines using the different CSS properties like display, vertical-align, and line-height. The display property sets the display behavior of an element. The vertical-align property is responsible for the vertical alignment of the element. We can set display to inline-block and vertical-align to middle to achieve the vertical alignment of multiple lines of text.

For example, create a div in HTML and write span inside of it. Write the text Hello and break the line with <br> and then write World! inside the span. Next, in CSS, give the line-height and the height to same value of 200px selecting the div. Give a border to the div and center align the text as we did in the first method. Then, select the span and set the display property to inline-block. Then, give the value of middle to vertical-align property. Finally, set the value of line-height to normal.

In the example below, we changed the line-height property to normal in span to have the multiple lines of texts have the normal line-height. The inline-block value will start the next line of the text right below the line above. The middle value of vertical-align property will place the text in the middle of the vertical axis.

Example Code:

<div>
    <span>Hello <br> World! </span>
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}
span {
    display:inline-block;
    vertical-align: middle;
    line-height: normal;
}

Simulate the Table Display to Vertically Center the Text in CSS

We can simulate the text as a table cell to vertically center it in CSS. We use the display property to simulate a table. We will also use the vertical-align property to center the text vertically. We will work on the HTML snippet of the second method and apply new CSS to it.

Firstly, select the div and set the height, width, and border. Use the display property and set the value to table. It will make the div act like a table. Then, select the span and set the display property to table-cell and the vertical-align property to middle. Setting the span element as table-cell will make the element like a table cell. In this way, we can create a vertically centered text.

Example code:

<div>
    <span>Hello <br> World!</span>
</div>

div {
    display: table;
    height: 200px;
    width: 100%;
    text-align: center;
    border: 3px solid black;
}
span {
    display: table-cell;
    vertical-align: middle;
}