固定高度+垂直对齐

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>