CSS Table Method: Simple

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

.child {
  height: 100px;
}

.container {
  display: table-cell;
  vertical-align: middle;
}

IE Fix:
.container {display: inline-block}
	

Here the container div is set to act as a table cell, which allows the vertical-align property to act on it. Setting vertical-align to middle centers it vertically within the parent element.

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.