75％容器中的垂直中心元素与其他元素

Question

我有一个100％高度的窗户容器。在这个容器中，我有另外两个较小的容器。一个高度为75％，一个高度为25％。

在第一个75％高度的容器中，我有导航（徽标和链接），填充为60px：

// Container
header > .slider {
  background-image: url("../images/SliderBG.png");
  background-size: cover;
  background-position: center center;
  height: 75%;
}

// Navigation
header > .slider > .navigation {
  padding-top: 60px;
}

在此导航下，我有一个Bootstrap面板：

<div class="container code-editor">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <div class="panel panel-default">
        <div class="panel-heading">Panel Heading</div>
          <div class="panel-body">
            Panel Content...
          </div>
        </div>
      </div>
    </div>
  </div>

以视野为中心。但是现在我想把它放在Verticaly中心，当我给Panel的容器提供100％的高度时，它会在父容器下面60px。

编辑：

在transform: translateY(50%);部分修复的问题上添加header > .slider > .code-editor。现在面板就像我想要的那样垂直居中，但是当我调整窗口文本的大小时，面板会更高，并且它不会像未调整大小那样居中。它走到了尽头并推动其他元素。