固定高度+垂直对齐

Question

我无法获得固定高度的部分加上垂直对齐的元素以遵循网格响应行为。唯一的限制是部分应该具有固定的大小。

我在SO上看到了一些示例，但它打破了列堆叠行为。

请参阅附件jpeg，了解我要完成的任务。

Answer 1

您可以使用排名relative。

section {
  height: 100px;
  line-height: 100px;
  border: 1px solid black;
}

div {
  border: 1px solid red;
  height: 50px;
  position: relative;
  top: 25%;
}

<section>
  <div>
  </div>
</section>