hello gang, another css newb here.. This seems like a common question but I have not found an answer that works for me. I am trying to center an object (media player) vertically within a div based on percentage. The parent div id is "top", I have created a child div (id is "centered") but I am not sure if this is necessary. As of right know, the child div is centered vertically within the browser window. My code is below.

#top {
text-align: center;
height: 70%;
background-color: Blue;
}
#centered
{
border: 0;
background-color: White;
height: 50%;
width: 50%;
position: absolute;
left: 25%;
top: 25%
}

<div id="top">
<div id="centered">
<object id="player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="352" height="240">
<param name="URL" value="images/wood_is_life.avi"/>
<param name="autoStart" value="true"/>
<param name="uiMode" value="none"/>
</object>
</div>
</div>