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. CSS transform property
  9. Floater div

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

Use the CSS vertical-align property

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

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

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

Example of vertically aligning a text:

<!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, it is possible to align elements vertically (or horizontally) with the align-items, align-self, and justify-content properties.

To learn how to create flexible layouts optimized for multiple devices, read our Flexbox Guide.

Example of vertically aligning a text with Flexbox:

<!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;
        align-items:center;
        justify-content:center;
      }
    </style>
  </head>
  <body>
    <section>
      <p> I'm centered with Flexbox!</p>
    </section>
  </body>
</html>

Use the CSS display property

With the display property, we're going to set the elements to "table" and "table cell". We center the content with the vertical-align property.

Example of vertically aligning a text with the CSS display property:

<!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 the CSS line-height property

Add the line-height property to the element containing a text larger than its font size. By default, equal spaces will be added above and below the text, and you’ll get a vertically centered text.

Example of vertically aligning a text with the CSS line-height property:

<!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 example works for a text with single and multiple lines. However, it requires a fixed height container.

Example of vertically aligning a text by using the CSS line-height property with a fixed height container:

<!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

When vertically aligning a text with the padding property, we must set the top and bottom padding of the parent element to be equal.

Example of vertically aligning a text with the CSS padding property:

<!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 the padding, use % to help them grow dynamically. This method requires some calculations to understand what values are needed on the top and bottom, so as they can grow dynamically. If you set the height to "relative", the calculation will not be needed.

Set absolute positioning and negative margin

We can vertically align a text with the CSS position and margin properties used with block-level elements. Do not forget to set the height of the element that you want to center.

  1. Set the position to "relative" for the "parent" class, and "absolute" for the "child_1" and "child_2" classes.
  2. Set both the top and left properties to 50% to center the left corner of the child <div>.
  3. Set the width and height of the child <div> elements in a way so it will be moved to up and left.
  4. Give a negative margin, which halves the height and width.

Example of vertically aligning a text with the CSS position and margin properties:

<!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 content exceeds the container, it will visually disappear.

Set absolute positioning and stretching

By setting absolute positioning and stretching, we instruct the browser to automatically set the margins of the child element so as they become equal.

  1. Set the position for the parent to "relative", and for the child, set it to "absolute".
  2. Set the top, bottom, left, and right properties for the child.
  3. Set the margin to "auto" to make all margins equal and make the child <div> to be centered vertically as well as horizontally.

Example of vertically aligning a text with the CSS position property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .parent {
        position: relative;
        text-align: center;
        height: 300px;
        background-color: lightblue;
      }
      .child {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 50%;
        height: 10%;
        margin: auto;
        font-size: 20px;
        line-height: 28px;
        padding: 10px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child">Example</div>
    </div>
  </body>
</html>

Set the CSS transform property

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

Example of vertically aligning a text with the CSS transform property:

<!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

Using the floater div method requires to have an empty <div>, which is floated.

  1. Set the float property to "left".
  2. Set the heigth to 50%.
  3. Clear the child <div> by using the clear property.
  4. Set a negative margin-bottom on the floater <div>.

Remember to have an empty <div> and set the height of the child element.

Example of vertically aligning a text with the CSS float property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #parent {
        height: 300px;
        border: 1px solid #1c87c9;
      }
      #floater {
        float: left;
        width: 100%;
        height: 50%;
        margin-bottom: -50px;
      }
      #child {
        clear: both;
        height: 100px;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h1>Example of vertically aligned text with CSS float property:</h1>
    <div id="parent">
      <div id="floater"></div>
      <div id="child"></div>
    </div>
  </body>
</html>

Do you find this helpful?

Related articles