CSS Table Method: Complicated

Empty Row
Child Element Row
Child Element Row
Empty Row
html:
<div id="parent">
  <div class="row"></div>
  <div class="row">
    <div class="child"></div>
  </div>
  <div class="row">
    <div class="child"></div>
  </div>
  <div class="row"></div>
</div>
	
css:
#parent {
  height: 300px;
  display: table;
}

.row {
  display: table-row;
}

.child {
  height: 100px;
  display: table-cell;
}
	

The empty rows above and below the child elements do most of the work here. The leftover space between the height of the parent and the combined height of the children is divided equally above and below.

Note: This method assumes the height of the parent element and each child element is fixed and known. However, the number of child elements is unknown and the total height of child elements is dynamic.

Additional styles not related to the above have been used to make this demo more presentable.