Css vertical align

1

i know that there are lots of examples about vertical centering, but mine doesnt seem to be working. could anybody tell me what i am doing wrong? i want to vertically center a 700x525 swf. i’d like to do it with css (because i want to learn it in the near future), but i don’t know much about it right now.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Center Testing</title>
<style>
    body
        {
        text-align: center; 
        background-color: #ffffff;
        }

    .centerdiv
        {
        width:700px;
        height:525px;
        position:absolute;
        top:50%;
        left:50%;
        margin:-262px auto auto -350px;
        }
</style>
</head>

<script type="text/javascript" src="swfobject.js"></script>

<body>
<div id="centerdiv">
    <div id="flashcontent"> <!-- this is where the alternative content goes -->

    </div>
</div>
</body>


<script type="text/javascript">
    var so = new SWFObject("testing.swf", "testing", "700", "525", "7", "#ffffff");  
    so.write("flashcontent"); <!-- writes to flashcontent...if the user has flash, it replaces all the alternative content -->
</script>

</body>
</html>