css - 固定高度+垂直对齐

Question

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

我已经看过关于 SO 的示例，但它破坏了列堆叠行为。

有关我要完成的工作，请参阅随附的 jpeg。

Answer 1

您可以使用相对位置。

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>