Pequena ajudinha na minha página de login

Olá!

Estou pedido uma ajudinha rápida. Achei uma página de login abandonada na net, e estou reestruturando ela, porém estou com uma leve dúvida. Quero deixar a caixa de login no centro da página, ela já está no centro, só que está localizada no topo.

Eu quero que ela fique centralizada no meio da página.

Segue o link da página para vocês observarem como ela está:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

E abaixo, o código dela, para poderem centralizar ela no meio da página:

Código:

 <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <style>
body {
background: url(http://i.imgur.com/tPMUcUO.jpg);
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
.styledH3 {
font-family: 'Open Sans', sans-serif;
color: #848484;
font-size: 20px;
font-weight: 700px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
line-height: 60px;
text-align: center;
background: url(http://i.imgur.com/b1KiYTW.png);
height: 60px;
}
.loginCenter {
-webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.37);
-moz-box-shadow:    0px 2px 2px 0px rgba(50, 50, 50, 0.37);
box-shadow:        0px 2px 2px 0px rgba(50, 50, 50, 0.37);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin:auto;
width:400px;
height: 300px;
background-color:#F8F8F8;
border: 1px solid #ccc;
}
.loginForm #username, .loginForm #password {
border: 1px solid #ccc;
height: 40px;
width: 320px;
}
.loginForm #username {
background: url(http://i.imgur.com/VvrGgTy.png) no-repeat right center white;
}
.loginForm #password {
background: url(http://i.imgur.com/OFUUH3R.png) no-repeat right center white;
}
.loginForm label[for="username"], .loginForm label[for="password"] {
margin-left: 40px;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: #848484;
}
.loginForm .formButton {
cursor: pointer;
width: 320px;
height: 40px;
background: url(http://i.imgur.com/XjNZgYJ.png) center;
background-color: #1d9d24;
border: 1px solid #1d9d24;
}
</style>
<div class="loginCenter">
   <div class="styledH3">
      Painel de Login!
   </div>
   <div class="loginForm">
      <form name="form_login" class="loginForm" method="post" action="/login">
          <dl><dt><label for="username">Username</label></dt> <dd> <input class="inputfield" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" /> </dd> </dl> <dl><dt><label for="password">Password</label></dt> <dd> <input class="inputfield" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" /> </dd> </dl> <dd> <input value="" name="redirect" type="hidden" /> <input value="" name="query" type="hidden" /> <input class="formButton" value="" tabindex="6" name="login" type="submit" /> <label for="username">| Insira seu Login |</label><label for="password">| Insira sua senha |</label> </dd>
      </form>
   </div>
</div>

Código:

 <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <style>
body {
background: url(http://i.imgur.com/tPMUcUO.jpg);
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
.styledH3 {
font-family: 'Open Sans', sans-serif;
color: #848484;
font-size: 20px;
font-weight: 700px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
line-height: 60px;
text-align: center;
background: url(http://i.imgur.com/b1KiYTW.png);
height: 60px;
}
.loginCenter {
-webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.37);
-moz-box-shadow:    0px 2px 2px 0px rgba(50, 50, 50, 0.37);
box-shadow:        0px 2px 2px 0px rgba(50, 50, 50, 0.37);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin:auto;
width:400px;
height: 300px;
background-color:#F8F8F8;
border: 1px solid #ccc;
position: relative;
top: 100px;
}
.loginForm #username, .loginForm #password {
border: 1px solid #ccc;
height: 40px;
width: 320px;
}
.loginForm #username {
background: url(http://i.imgur.com/VvrGgTy.png) no-repeat right center white;
}
.loginForm #password {
background: url(http://i.imgur.com/OFUUH3R.png) no-repeat right center white;
}
.loginForm label[for="username"], .loginForm label[for="password"] {
margin-left: 40px;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: #848484;
}
.loginForm .formButton {
cursor: pointer;
width: 320px;
height: 40px;
background: url(http://i.imgur.com/XjNZgYJ.png) center;
background-color: #1d9d24;
border: 1px solid #1d9d24;
}
</style>
<div class="loginCenter">
  <div class="styledH3">
      Painel de Login!
  </div>
  <div class="loginForm">
      <form name="form_login" class="loginForm" method="post" action="/login">
          <dl><dt><label for="username">Username</label></dt> <dd> <input class="inputfield" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" /> </dd> </dl> <dl><dt><label for="password">Password</label></dt> <dd> <input class="inputfield" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" /> </dd> </dl> <dd> <input value="" name="redirect" type="hidden" /> <input value="" name="query" type="hidden" /> <input class="formButton" value="" tabindex="6" name="login" type="submit" /> <label for="username">| Insira seu Login |</label><label for="password">| Insira sua senha |</label> </dd>
      </form>
  </div>
</div>