Animating a horizontally and vertically centred DIV

Animating a horizontally and vertically centred DIV

Hi, i've been wrestling with this issue for the last hour. I can't seem to get this centred div to animate properly. 
What it currently does: 
A small div, (10x2px) expands to full 100% width and 100% height. However, it expands in the bottom right hand corner of the screen.

What I am trying to get it to do:
To expand equally in all four directions. 

Please help me with this. Im new to jquery and would appreciate your help. 

Code:

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Jquery</title>
  7. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  8. <script type="text/javascript">
  9. $(function() { 
  10.    
  11. $('#smallscreen').css({
  12.      "opacity": "1",
  13. "bottom": "50%",
  14. "right": "50%",
  15. "top": "50%",
  16. "left": "50%",
  17.  
  18. });
  20. $('#smallscreen').animate({
  21.  "opacity": "1",
  22.    "width": "100%",
  23.  "height": "100%"
  24.  });
  25.   });
  26. </script>
  27. <style type="text/css">
  28.     .test { font-weight: bold; }
  29.    .blue { color: blue; }
  30.     .red { color: red; }
  31.  #smallscreen {
  32. position:absolute;
  33. width:10px;
  34. height:2px;
  35. z-index:1;
  36. background-color: #FFF;
  37. text-align:center;
  38. }
  39. body {
  40. background-color: #000;
  41. height: 100%;
  42. text-align:center;
  43. }
  44. </style>
  45.     </head>

  47. <body>
  48. <div id="smallscreen"></div>
  49. </body>
  50. </html>