Open In App

How to Vertically Center Text with CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to align the text vertically using CSS. But, we can align the center blocks vertically, by combining a few properties. The trick is to specify the outer block to be formatted as a table cell because the contents of a table cell can be centered vertically.

Before that, let’s first create a basic HTML structure in which the body consists of a `<div>` element styled to have a height of 200 pixels, width of 400 pixels, and a dashed border with color #4b2869. Inside the div, the text “GeeksforGeeks” is displayed.

HTML




<!DOCTYPE html>
<html>
   <head>
      <title>Horizontal and Vertical alignment</title>
      <style>
         div {
         height: 200px;
         width: 400px;
         border: 2px dashed #4b2869;
         }
      </style>
   </head>
   <body>
      <div class="container">GeeksforGeeks</div>
   </body>
</html>


Examples to Vertically Center Text using CSS

1. Using display: table-cell:

We will use the vertical-align property that specifies the vertical alignment of the table box or inline element. This will describes the use of the vertical-align property along with the display property as table-cell.

Syntax:

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
DIV {
  GeeksforGeeks
}

HTML




<!DOCTYPE html>
<html>
   <head>
      <title>Horizontal and Vertical alignment</title>
      <style>
         div {
         height: 200px;
         width: 400px;
         border: 2px dashed #4b2869;
         }
         .container {
         min-height: 10em;
         display: table-cell;
         vertical-align: middle;
         }
      </style>
   </head>
   <body>
      <div class="container">GeeksforGeeks</div>
   </body>
</html>


Output:

Vertically Center using display: table-cell

2. Using line-height and vertical-align:

The CSS just sizes the div, vertically center aligns the span by setting the div’s line-height equal to its height, and makes the span an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the span, so its contents will flow naturally inside the block. This describes aligning the content vertically with a fixed height of the container.

Syntax:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title> Horizontal and Vertical alignment </title>
    <style>
    div {
        height: 200px;
        line-height: 200px;
        text-align: center;
        border: 2px dashed #f69c55;
    }
     
    span {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }
    </style>
</head>
 
<body>
    <div>
      <span>GeeksforGeeks</span>
      </div>
</body>
 
</html>


Output:

Vertically center using  line-height and vertical-align

CSS is the foundation of web pages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads