Vertical align div inside another div without flex

Question

How to vertically align div inside another div using property vertical-align:middle.

Here is my code.

.hello {
  height: 100px;
  width: 100px;
  background-color: black;
  vertical-align: middle;
  display: inline-block;
  color: white;
}
.parent {
  height: 400px;
  width: 400px;
  border: 1px solid red;
  display: table-cell;
}

<div class ="parent ">
  <div class="hello">
    hello
  </div>
</div>    

I referred and found giving parent table-cell property and child inline-block works but still not.

Html

Answer 1

Here you go.

Code Snippet:

.hello {
  height: 100px;
  width: 100px;
  background-color: black;
  vertical-align: middle;
  display: inline-block;
  color: white;
}

.parent {
  height: 400px;
  width: 400px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div class="parent ">
  <div class="hello">
    hello
  </div>
</div>