Align inline-block in block vertically

<div class="out">
  <div class="in">Inline</div>
</div>

.in {
  display: inline-block;
  vertical-align: middle;
  background: green;
  height: 20px;
  width: 100px

}

.out {
  background: #ADD8E6;
  height: 80px;
}

.out:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}