10 methods to vertically center a text using CSS

We can use flex property align-items: center to center the text of an HTML element vertically. You can also make it center horizontally using justify-content: center; CSS.

Vertical centering of text can sometimes seem like a challenge when you’re styling an element on the web. Whether you’re creating a navigation menu or trying to center some text on a page, vertical centering gives your design a cleaner look. There are several ways to vertically center an element using CSS. In this post, we’ll go over 10 methods you can use to vertically center text with CSS.

Center text vertically using flex

If the parent of the text element is flexbox, then you can easily center the text vertically. We can use CSS properties that are used along with display: flex to make the text vertically center to its parent.

The full HTML and CSS code

<div class="ele">
  Make this text vertically center
</div>

<style>
  .ele {
    display: flex;
    align-items: center;
    height: 200px;
    background: #eee;
    justify-content: center;
  }
</style>

Use of line-height property to center a text

The line-height CSS property can also be used to center a text vertically. You need to assign the same value to the height and line-height property to make the child text of an HTML element vertically centered.

Example

<div class="ele">Centered text</div>

.ele {
    height: 200px;
    background: #eee;
    line-height: 200px;
}

CSS vertically center text using position absolute

We can also make a text vertically centered using position relative to the parent element and position absolute property to the child element. Along with those we will use transform, left, right properties to make it work. The below code will also align the text-centered horizontally.

<div class="parent">
    <span class="child">Centered text</span>
</div>

.parent {
  position: relative;
  height: 300px;
  background: #ddd;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Live Demo of above code

Use table cell to center a text vertically

We can also use a display table to parent and display table-cell property to the child to make the child element text vertically centered. We also use vertical-align: middle property on the child element that is table-cell.

We can understand it by using the below example

<div class="parent">
  <span class="child">Centered text</span>
</div>

.parent {
  display: table;
  width: 100%;
 
}
.child {
  text-align: center;
  height: 120px;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  border: 2px solid #275cd8;
}

To view a live demo of the above code on jsfiddle click here.