How to Vertically Center Text in CSS

Often web developers need to vertically align text on their websites. This is especially required to improve legibility and aesthetics. It can be done using CSS as well as JavaScript. In this article, we will learn different ways to vertically center text in CSS.

How to Vertically Center Text in CSS

Let us look at the different ways to vertically center the text inside the div element.

1. Basic Solution

Let us say you have the following div element with some text.

<div>
  test text
</div>

In this approach, we use a fixed height div and set its line height equal to the height of the div. This is what vertically aligns the inner text. We also set text-align attribute to center, to horizontally center it. This does not affect vertical alignment. Here is the CSS for it.

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid black;
}

Please note, this solution will work for a single line of text since we have set line height of div equal to its fixed-height.

2. Using Span

This solution will also work with multiple lines of text. Let us say your text is wrapped in span tag, which in turn is inside a div.

<div>
  <span>hello world</span>
</div>

In this case, we format our div as we did before, by setting its line height equal to its fixed height.

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid black;
}

Then we format the inner span by setting its display to be inline-block. We set vertical-align attribute to middle to vertically align text. Lastly, we set the line-height to normal.

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

The div will center align the span inside it using the line-height property. It also makes the span inline-block with vertical-align:middle.

3. Using table display

HTML tables also support vertical alignment. By configuring your div to be like a table cell, you can vertically align its contents. Here is the HTML, same as previous case.

<div>
  <span>hello world</span>
</div>

Here is its CSS. We set the div’s display to be table, with width to be 100%. You can change the width as per your requirement. The important CSS here is display:table that allows you to display div as tables. So its content becomes that of table cells. In our case, the span works like a table cell. So we set its display to table-cell. We also set its vertical-align property to middle to vertically align text in the span.

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

It is just like vertically aligning a text in a table cell. In this case, the div is like a table with one cell, and the span inside the div is that one cell. Rest is similar to table formatting.

However, older web browsers like Internet Explorer may not support this approach.

4. Using Flexbox

You can also use the new flexbox formatting available in CSS. Flexbox allows you to layout the elements in a flexible manner. Here again we use the same HTML, text within a span within a div.

<div>
  <span>hello world</span>
</div>

In this case, we just need to set the display to flex and align-items to center. We do not need to format the span to vertically align text. The property justify-content is used to center align the text horizontally and align-items property vertically aligns the div content..

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100%;
  border: 1px solid black;
}

5. Using Auto Margin

In the above approach, we center the text content via its div container. But if your flex container contains only one item, as in the case of a span in a div, you can also set margin to auto to vertically and horizontally align it.

div {
  display: flex;

  justify-content: center;
  height: 100px;
  width: 100%;
  border: 1px solid black;
}
span{
  margin: auto;
}

6. Using flex-direction

By default, when you set the display as flex, then its contents are laid as rows. flex-direction property determines this action and its default value is row. However, if you want to lay out the contents vertically, then you need to set flex-direction to column, on the container element. Additionally, you need to set align-items and justify-content to center. However, in this case, justify-content vertically aligns content whereas align-items horizontally aligns items. In our previous examples, they work the other way around.

div {
  display: flex;
  justify-content: center;
  align-items: center;  
  flex-direction: column;
  height: 100px;
  width: 100%;
  border: 1px solid black;
}

Conclusion

In this article, we have learnt several different ways to vertically center text in CSS. You can use any of these methods depending on your requirement.

Also read:

How to Move Element Into Other Element in jQuery
How to Store Objects in HTML5 Local Storage/Session Storage
How to Remove Duplicate Values from JS Array