display:table-cellにposition:absoluteを付けるとvertical-align:middleが無効になる1

HTML

<div class="gray">
  <div class="red"></div>
</div>

CSS

.gray {
  display: table-cell;
  position: absolute;
  width: 200px;
  height: 200px;
  vertical-align: middle;
  text-align: center;
  background: gray;
}

.red {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}