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 you 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.

Create HTML

Create two divs with the following <span class="attribute">id</span>: "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>

Try it Yourself »

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 <kbd class="highlighted">position: absolute</kbd> and specify its top, height, and margin-top.

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;
  border: 2px solid #1C87C9;
  height: 10em;
}

#green {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
  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;
        border: 2px solid #1C87C9;
        height: 10em;
      }
      #green {
        position: absolute;
        top: 50%;
        height: 100px;
        margin-top: -50px;
        border: 1px solid #8EBF42;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h1>Vertically aligned element</h1>
    <div id="blue">
      <div id="green"></div>
    </div>
  </body>
</html>

Try it Yourself »

Result

<div class="demo mt-2.5 mb-5 not-prose"> XFI5 <div id="green"> </div> </div> </div> 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>

Try it Yourself »

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>

Try it Yourself »

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. It cannot be used to align block-level elements vertically. Historically, it was used with the deprecated valign attribute. For inline or table-cell elements, you can use vertical-align: middle to align content within the line box or cell.