Absolute positioning and vertical stretching

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

#child {
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
  margin: auto;
  width:50%;
  height: 30%;
 }
	

The child div is positioned inside the parent div and it's top, bottom, left, and right values are all set to 0.

Because the child div's height and width are set less than the height and width of the parent div this positioning is impossible

Setting all 4 margins of the child div to auto leads to equal margins on top and bottom and left and right, which results in the child div being centered both horizontally and vertically.

Unfortunately this method won't work in IE7 and below.

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