Re-positionnement auto d'un div selon t.écran

Bonjour tout le monde,
j'ai un tout petit problème, j'ai un div (qui contient l'authentification) que j'ai placé au centre de ma page
malheureusement quand j'ai ouvert la page sur un autre ordinateur qui a un écran inférieur au mien, la div d'authentification
est décalé sur la droite.

Ma question: comment faire pour que le centrage de la div reste et ne dépend pas de la taille de l'écran,
Merci pour votre aide et bon weekend à tous

Mon code php

<div id="apDiv1">
 <form name="f1">
    <div class="single">
      <label for="login">Nom d'utilisateur:</label>
      <input type="text"  id="login" name="login" size="20"/>
    </div>
    <div class="single">
      <label for="login">Mot de passe:</label>
      <input type="password"  id="password" name="password"size="20"/>
    </div>
    <div align="right">
      <input type="submit" value="Se connecter" id="connect"/> 
    </div>
 </form>
 
 <p align="right">&nbsp; </p>
</div>

Mon code css:

#apDiv1 {
	-moz-border-radius:5%;
	width: 460px;
	height: 470px;
	margin: 0px;
	padding: 0;
	border: 1px solid rgba(0,0,0,0.5);
	border-radius: 10px 10px 2px 2px;
	background: rgba(0,0,0,0.25);
	box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
	-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
	position:absolute;
	z-index:2;
	visibility: visible;
	left: -7px;
	top: -8px;
}