如何以高度百分比垂直居中浮动元素？

Question

我有一堆向左浮动的.item。每个元素的高度定义为12.5％。

如何将这些元素垂直居中设置为父级高度div的100％？

我尝试使用“经典” top: 50%，transform: translateY(-50%)方法，但是没有任何浮动元素出现（它们以0px的高度进行渲染）。

<div class="centered-container">
  <div class="centered">
    <div class="item"></div>
    <div class="item"></div>
...etc
  </div>
</div>

CSS

.centered-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.centered {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  border: 1px solid red;
}

.item {
  float: left;
  width: calc(100% / 4);
  height: 12.5%;
  background-color: green;
  z-index: 99999;

  &:nth-child(2n)
  {
    background-color: brown;
  }
  &:nth-child(3n)
  {
    background-color: yellow;
  }
}

https://codepen.io/anon/pen/NomWmN