How to Vertically Align Elements in a Div

Sometimes centering elements vertically with CSS can cause some troubles. However, there are a few ways allowing to center elements in a <div>.

Here, we’ll discuss some possible ways which are easy to implement if you follow the steps described below.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Create two divs with the following id : "blue" and "green".
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Vertically aligned element</h1>
    <div id="blue">
      <div id="green"></div>
    </div>
  </body>
</html>

Add CSS

For block elements, vertical alignment of elements is difficult and depends on the situation. If a child element can have a fixed height, you can add position: absolute and specify its top, height, margin-top, position.

  • Use the position property with the “relative” value for the parent element to place it relative to its normal position.
  • Use the position property with the “absolute” value for the child element to place it relative to its positioned parent element.
  • Add the height, margin-top, top, border, and width properties.
#blue {
  position: relative;
}

#green {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

#blue {
  border: 2px solid #1C87C9;
  height: 10em;
}

#green {
  border: 1px solid #8EBF42;
  width: 100%;
}

Here is the result of our code.

Example of aligning an element vertically in a div with the position property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #blue {
        position: relative;
      }
      #green {
        position: absolute;
        top: 50%;
        height: 100px;
        margin-top: -50px;
      }
      #blue {
        border: 2px solid #1C87C9;
        height: 10em;
      }
      #green {
        border: 1px solid #8EBF42;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h1>Vertically aligned element</h1>
    <div id="blue">
      <div id="green"></div>
    </div>
  </body>
</html>

Result

Another method is to use the line-height property with a value equal to the height property. This is a method to use when a centered element consists of a single line, and the height of its parent is fixed.

Example of aligning an element vertically in a div with the line-height property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        margin: 0;
      }
      #outer {
        border: 2px solid #5c34eb;
        height: 100px;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <h1>Vertically aligned element</h1>
    <div id="outer">
      <p>Lorem Ipsum</p>
    </div>
  </body>
</html>

Let’s see how we can align an element in a div with the padding property. To make this method work, we’ll need to set top and bottom paddings on the outer element.

Example of aligning an element vertically in a div with the CSS padding property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .center {
        padding: 60px 0;
        border: 2px solid #5c34eb;
      }
    </style>
  </head>
  <body>
    <h1>Vertically aligned element</h1>
    <div class="center">
      <p>Lorem Ipsum.</p>
    </div>
  </body>
</html>

There is also one more method to align elements vertically. You can use the vertical-align property, which commonly applies to inline, inline-block, and table-cell elements. But it cannot be used to align block-level elements vertically. Earlier, it was used with the valign attribute, but now this attribute is deprecated. Instead, you can use vertical-align: middle.