Search code snippets, questions, articles...

10 methods to vertically center a text using CSS

One of the most common questions about CSS is how to vertically center something. The purpose of this post is to provide you with different solutions that will help you with your vertical centering needs.
/* Using flex */
.ele {
    display: flex;
    align-items: center;
    height: 200px;
    background: #DDDDDD;
}
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

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.

.parent {
  display: flex; /* IMPORTANT CSS */
  height: 200px;
  width: 90%;
  border: 2px solid #f9579d;
}
.child {
  margin: auto; /* IMPORTANT CSS */
  text-align: center;
  background: #f4bad3;
  padding: 20px;
}
We can also use margin auto> to the child element and display flex on the parent element to make the child text-centered align to the parent vertically. To check the live example demo for the above code, click here.
.parent {
    position: relative;
    height: 300px;
    border: 2px solid #000;
    width: 90%
}
.child {
    position: absolute;
    height: 80px;
    width: 190px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: 2px solid #000;
    margin: auto;
}
Here, we have assigned position relative to the parent element and position absolute to the child element. The child element also has height and width properties along with left, right, top, bottom properties having value 0. We also assigned margin auto to the child element
Was this helpful?
0 Comments