Absolute positioning and negative margin

html:
<div id="parent">
  <div id="child"></div>
</div>
	
css:
#parent {position: relative}

#child {
  position: absolute;
  top: 50%;
  left: 50%;
  height:30%;
  width:50%;
  margin: -15% 0 0 -25%;
 }
	

The child is centered in the parent through the use of positioning and negative margins. By setting the top and left values to 50% the top left corner of the child div will be positioned in the center of the parent div.

Negative top and left margins equal to half the height and width of the child are then used to pull the inner div up and to the left so it's center is in the center of the parent div.

This method works best for centering block level elements and it requires the dimensions of the child div be known.

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