html:
<div id="parent">
  <div id="floater"></div>
  <div id="child">Content here</div>
</div>
	
css:
#parent {height:200px;}

#floater {
  float: left;
  height: 50%;
  width: 100%;
  margin-bottom: -50px;
  outline: 1px solid red
}

#child {
  clear: both;
  height:100px;
  outline: 1px solid yellow;
}
	

Here an empty div (seen by the red outline) is set to half the height of the parent div and floated left (or right).

The div we want to center (seen by the yellow outline) is then cleared so it's top edge will sit directly below the bottom edge of the floated div.

To bring the vertical center of the child div up we add a negative bottom margin to the floater div that's equal to half the height of the child div.

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