How to Make the CSS vertical-align Property Work on the <div> Element

Solutions with the CSS display property

It’s possible to vertically center a <div> element within another <div> by using the CSS vertical-align property set to “middle”.

In this snippet, we suggest using two methods, both including the use of the display property.

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

Example of vertically centering a <div> within another <div> using the “flex” value of the display property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        display: flex;
        align-items: center;
        background-color: #f8fc03;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div>Hello world!</div>
    </div>
  </body>
</html>

Try it Yourself »

Result

Hello world!

In the next example too, we use the display property, but with the “table” value for the outer container, and the “table-cell” value for the inner container.

Example of vertically centering a <div> within another <div> using the “table” value of the display property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        display: table;
        height: 200px;
      }
      .inner {
        display: table-cell;
        vertical-align: middle;
        background-color: #aef5b8;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="inner">Text</div>
    </div>
  </body>
</html>