X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

How to Vertically Center Text with CSS

  1. CSS vertical-align Property
  2. CSS Flexbox
  3. CSS Table Display
  4. CSS line-height Property
  5. Equal Top and Bottom Padding
  6. Absolute Positioning and Negative Margin
  7. Absolute Positioning and Stretching
  8. Transform Property
  9. Floater div

Centering elements vertically with CSS often gives trouble. There are however several ways of vertical centering, and each is easy to use.

Use CSS vertical-align Property

The vertical-align property is used to center vertically inline elements.

The values for vertical-align align the element relative to its parent element:

  • Line-relative values vertically align the element relative to the entire line.
  • Values for table cells are relative to the table-height-algorithm, which usually means the height of the row.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style type="text/css">
      div {
        display: table-cell;
        width: 250px;
        height: 200px;
        padding: 10px;
        border: 3px dashed #1c87c9;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div>Vertically aligned text</div>
  </body>
</html>

Use CSS Flexbox

With Flexbox, you can align elements vertically (or horizontally) with the align-items, align-self, and justify-content properties.

Read our Flexbox Guide to learn how to create flexible layouts optimized for multiple devices.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      section { 
        display: flex; 
        width: 50%; 
        height: 200px; 
        margin: auto; 
        border-radius: 10px; 
        border: 3px dashed #1c87c9; 
      } 
      p { 
        margin: auto; /* Important */ 
        text-align: center; 
      }
    </style>
  </head>
  <body>
    <section>
      <p> I'm centered with Flexbox!</p>
    </section>
  </body>
</html>

Use CSS display:table

In this method we will display elements as table and table cell and center content with vertical-align property.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #parent {
        display: table; 
        width: 100%; 
        height: 200px; 
        border: 3px dashed #1c87c9;
        text-align: center; 
      }
      #child {
        display: table-cell;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">I am vertically centered</div>
    </div>
  </body>
</html>

Use line-height Property

This method can be used for vertically centering a single line of text. Add line-height property to the element, which contains the text that is larger than its font size. By default, equal spaces will be added above the text and below it, and you’ll get vertically centered text.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        height: 90px;
        line-height: 90px;
        text-align: center;
        border: 3px dashed #1c87c9;
      }
    </style>
  </head>
  <body>
    <p>I am vertically centered</p>
  </body>
</html>

The following method works for a single line and multiple lines of text. However, it requires a fixed height container:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        display: inline-block; 
        width: 100%;
        height: 200px;
        vertical-align: middle; 
        line-height: 200px;
        text-align: center; 
        border: 3px dashed #1c87c9;  
      }
    </style>
  </head>
  <body>
    <div>I am vertically centered</div>
  </body>
</html>

Set Equal Top and Bottom Padding

In this method we set the top and padding of the parent element to be equal.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .center {
        padding: 10% 0;
        border: 3px dashed #1c87c9;
      }
    </style>
  </head>
  <body>
    <div class="center">
      <p>I am vertically centered.</p>
    </div>
  </body>
</html>

When setting padding: use % to help them grow dynamically. This method requires some calculations to understand what values you need to set on top: and bottom; for them to grow dynamically. If you set height: relative; calculation would not be needed.

Set absolute positioning and negative margin

This method is used with block level elements. Do not forget to set the height of the element you want to center.

  1. Set #parent {position: relative} and child {position: absolute;}
  2. Set top: 50%; and left: 50%; to center left corner of the child <div>.
  3. Set child <div> {width:} and {height:} in a way so it will be moved to up and left.
  4. Give negative margin: it halves the height and width.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .parent {
        position: relative;
        width: 100%;
        height: 220px;
        background: #1faadb;
        color: #fff;
      }
      .child_1, .child_2 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 110px;
        height: 70px;
        background: #8ebf42;
        text-align: center;
      }
      .child_1 {
        margin: -35px 0 0 -55px;  
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child_1">Vertically Centered Text</div>
    </div>
    </br>
    <div class="parent">
      <div class="child_2">Not Centered Text</div>
    </div>
  </body>
</html>

If the contents outgrow container, it will visually disappear.

Set absolute positioning and stretching

In this method we instruct the browser to automatically set the margins of the child element so they become equal.

  1. Set parent {position: relative} and child {position: absolute;}
  2. Set child {top: 0; bottom: 0; left:0; right:0;}
  3. Set 4 margin: auto; to make all margins equal and results to child <div> to centered vertically as well as horizontally.

Example

#parent {
  position: relative;
}
#child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 30%;
  margin: -15% 0 0 -25%;
 }

Set transform property

When we have position: absolute; left: 50%; top: 50%; the calculations are made starting from the upper left corner. To position the text in the center, we should “move” it -50% left and 50% up by setting transform: translate (-50%;-50%).

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .parent {
        position: relative;
        width: 100%;
        height: 220px;
        background: #1faadb;
        color: #fff;
      }
      .child_1, .child_2 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 90px;
        height: 90px;
        padding: 5px;
        background: #8ebf42;
        text-align: center;
      }
      .child_1 {
        transform: translate(-50%, -50%);  
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child_1">Vertically Centered Text</div>
    </div>
    </br>
    <div class="parent">
      <div class="child_2">Not Centered Text</div>
    </div>
  </body>
</html>

Use floater div

This method requires you to have an empty div, which is floated.

This method requires you to have an empty div.

  1. Float: floater <div> to the left or right.
  2. Set Height: 50%;
  3. Empty child element.
  4. Clear child <div> by using clear: property

Your should bring the child element up by an amount equal to half the height. To do that set a negative margin-bottom: on the floater <div>

Example

#parent {
  height: 200px;
}
#floater {
  float: left;
  width: 100%;
  height: 50%;
  margin-bottom: -50px;
  outline: 2px solid #1c87c9;
}
#child {
  clear: both;
  height:100px;
  outline: 2px solid #8ebf42;
}

Remember to have an empty div and set a height for the child element.


Do you find this helpful?

Related articles