How do I align a div within another div both horizontally and vertically? I've google this and cannot come up with a solution.

Here's what I have now:

Code:
<style type="text/css">
<!--
#outer {
	position:relative;
	width: 100%;
	height: 100%;
	}
#inner {
	width:auto;
	margin-left:auto;
	margin-right:auto;
	}
-->
</style>

<div id = "outer">
<div id="inner">
      <form id="form1" name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
	  
        <table width="200" border="0" align="center">
          <tr>
            <td colspan="2" align="center" bgcolor="#333333">Login</td>
          </tr>
          <tr>
            <td bgcolor="#333333">Username: </td>
            <td bgcolor="#333333"><input type="text" name="username" id="username" /></td>
          </tr>
          <tr>
            <td bgcolor="#333333">Password: </td>
            <td bgcolor="#333333"><input type="password" name="password" id="password" /></td>
          </tr>
          <tr>
            <td bgcolor="#333333">&nbsp;</td>
            <td bgcolor="#333333"><input type="submit" name="login" id="login" value="Login" /></td>
          </tr>
        </table>
        <p>&nbsp;</p>
      </form>
      </div>
      </div>
It only aligns horizontally.