Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to vertically center text with CSS ?

  • Last Updated : 02 Nov, 2021

In this article, we will know how to align the text vertically using the CSS & will see its implementation through the example. Although CSS2 doesn’t support Vertical aligning. But, we can align the center blocks vertically, by combining a few properties. The trick is to specify the outer block is to be formatted as a table cell because the contents of a table cell can be centered vertically. We will use the vertical-align property that specifies the vertical alignment of the table-box or inline element.

The below example centers a paragraph inside a block that has a certain given height. A separate example shows a paragraph that is centered vertically in the browser window because it is inside a block that is absolutely positioned and as tall as the window. 

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

Example: This example describes the use of the vertical-align property along with the display property as table-cell.

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:

There is a more versatile approach that specifies another way to align text vertically. This solution will work for a single line and multiple lines of text, but it still requires a fixed height container.

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

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.

Example: This example describes aligning the content vertically with a fixed height of the container.

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:

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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!