Top 5 Ways to Vertically Center Text with CSS

Aligning text either horizontally or vertically is a very common task in CSS and we need it almost every day while designing web pages.

Despite its importance, it often gives you trouble, especially when you are new to CSS. This is because the vertical alignment is a little trickier than that of the horizontal one.

Keeping all this in mind, we are going to introduce you the top 5 easy methods that we can use to vertically center text in CSS. These methods are as follows:

• Using the line-height Property
• Using CSS Flexbox
• Using CSS Grids
• Using the padding property
• Using the position and transform Property

All of these methods are easy to implement and need no special knowledge of CSS. So, let’s discuss each one in detail.

Vertically Center Text using the line-height Property

This is the easiest approach to vertically center the text inside its container. In this method, all you need to do is specify the line-height same as the container’s height.

For example, if the height of the container is 200px, the line-height should also be 200px.

Here is a working example:

Example:

div{
   height: 200px;
   line-height: 200px;
   border: 2px dashed red;
   padding: 5px;
}

Note: This method has a limitation that it can vertically center only one line of text. If the text inside the container is multi-line, this method is not efficient.

Vertically Center Text Using CSS Flexbox

CSS flexbox is always a good choice if you want to center text either horizontally or vertically. Unlike the previous method, this method can vertically center one-line as well as multi-line of text inside its container.

To vertically center the text with this method, you have to make the container a flexbox. This is done by applying display: flex; on the element that you want to make a flex container.

To vertically and horizontally center text inside this flex container you can use the align-items and the justify-content property.

To vertically center the text use align-items: center; and to horizontally center the text use justify-content: center;.

Here is a working example:

Example:

div{
    display: flex;
    align-items: center;
    height: 200px;
    border: 2px solid red;
    padding: 5px;
}

Vertically Center Text using CSS Grids

This method is almost similar to the previous method. Here, we make the parent element a grid container by applying display: grid; on it.

The rest of the things remains the same as the previous method, i.e. to vertically center use align-items: center; and to horizontally center use justify-content: center;

Here is a live example:

Example:

div{
    display: grid;
    align-items: center;
    height: 200px;
    border: 2px solid red;
    padding: 5px;
}

Vertically Center Text using the padding Properties

To vertically center the text using this method, we have to make the values of the padding-top and padding-bottom equal.

You can specify these values either in the shorthand padding property or individually using the padding-top and padding-bottom.

We have used the padding shorthand to set the padding values.

Here is a working example:

Example:

div{
    padding: 100px 5px;
    border: 2px solid red;
    font-size: 24px;
}

Vertically Center Text using the position and transform Properties

This method is a bit trickier than the ones that we have discussed so far.

The basic idea here is to make the element absolutely positioned and then center it vertically using the top property.

But if you directly make the position of the element absolute, it would be positioned relative to the webpage. But that’s not what we want.

To avoid this we have to put the target element inside a container having a position relative so that it can be positioned relative to this relatively positioned container.

Now, to vertically center this element, simply set the top property to 50%. But this will only put the top edge of the element in the center, not the whole element.

Therefore, we have to move the element -50% up so that it could be centered perfectly. To do this we will use the transform property.

Here is the full example:

Example:

div.container{
    position: relative;
    border: 2px solid red;
    height: 200px;
}
div.target{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    padding: 5px;
}