强制显示：表div占据所有可用高度

Question

我正在尝试将div（.site-title）内的文本垂直居中，其本身在div（.site-title-wrapper）内，所有这些都放在另一个div（.site-header）中，这是网站的菜单。

以下是一些图片：

绿色：.site-title-wrapper 红色：.site-title 白色：.site-header

对于这些div，我有以下CSS：

.site-title-wrapper {
   display: table;
   height: 100%;
   position: absolute;
   padding: 23px;
   background-color: green;
}

和

.site-title {
   font-family: "Roboto", sans-serif;
   display: table-cell;
   vertical-align: middle;
}

我已经看到，使用table和table-cell将div垂直居中放置在另一个div内是一个很好的解决方案。它工作正常，但是我唯一需要做的就是强制.site-title-wrapper占据所有可用高度，因此绿色框会降到白色（菜单）的末尾。

这个想法只是将标题与菜单元素居中。

我无法真正更改html部分，因此我仅尝试使用CSS进行修复。

您知道我该如何解决吗？

.site-header{
  width: 100%;
  height: 100px;
  border: 2px solid black;
}

.site-title-wrapper {
   display: table;
   height: 100%;
   padding: 23px;
   background-color: green;
}


.site-title {
   font-family: "Roboto", sans-serif;
   display: table-cell;
   vertical-align: middle;
   background-color: red;
}

<div class='site-header'>
  <div class='site-title-wrapper'>
    <div class='site-title'>
      <a href="#">Some Text</a>
    </div>
  </div>
</div>

编辑：这是一个小提琴，我尝试进行的工作（我刚刚删除了绝对值）：https://jsfiddle.net/0xhL76gk/2/