How to Vertically Center Align Text in a Div using CSS Code Example

Let us take a look at how to vertically center text inside a <div> element using CSS,

Step 1: Let's create a div element with some text

<div>This is some text I want to center<div>

Step 2: Let's add some border and background

Adding border and background just to see if we are able to achieve the center alignment of the text within the div

.center_text {
  border:1px solid #444;
   background:#22929266
}

<div class="center_text">This is some text I want to center<div>

Step 3: Let's add width and height to the div

Again! This is just for the demo purpose, you may change the dimensions according to your needs.

.center_text {
  border:1px solid #444;
  background:#22929266;
  width:400px;
  height:200px
}

<div class="center_text">This is some text I want to center<div>

Step 4: Add property line-height

Make sure to add line-height exactly the same as that you have set for your div element. In our case, it is 200px

.center_text {
  border:1px solid #444;
  background:#22929266;
  width:400px;
  height:200px
  line-height:200px
}

<div class="center_text">This is some text I want to center<div>

You will see that the text will be vertically aligned to the center of your div element.

Step 5: Add propertytext-align

Adding the property text-align:center will make the text-align at the center of the element both vertically and horizontally.

.center_text {
  border:1px solid #444;
  background:#22929266;
  width:400px;
  height:200px
  line-height:200px
  text-align: center;
}

<div class="center_text">This is some text I want to center<div>

Have Questions? Post them here!