Here you go.
http://jsfiddle.net/UFMP7/1/
The trick is to play with the margin and the top offset properties of the nested element.
In this case, given a parent div (A) of 300px, I've offset the nested div (B) by 50% of 300, which is 150. So B is positioned 150px down from the top of the A container. However, we aren't finished. In order to get the center of B to match the center of A, we are required to apply the negative 50% of B's height to the margin-top property. This centers it and the math checks out.
It's even easier if you know the dimensions of everything in pixels.
Feel free to change the A width or height. It'll center dynamically.
div#a
{
width: 300px;
height: 300px;
border-width:1px;
border-style: solid;
/* important stuff below */
display: inline-block;
}
div#b
{
width: 60px;
height: 60px;
background-color: red;
/* important stuff below */
position: relative;
margin: -30px auto 0 auto;
top: 50%;
}
As such, I'd suggest wrapping your iframe in a div. It gives you a bit more control. Then again, I'm one of those excessive div wrappers...