Fixed height + vertically aligned

Question

I am having trouble getting a fixed height sections plus vertically aligned elements to follow grid responsive behavior. Only constraint is that sections should have a fixed size.

I have seen examples on SO but it breaks columns stacking behavior.

See attached jpeg on what I am trying to accomplish.

Answer 1

You can use position 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>