Centrare un'immagine in un box div

[timefinder1979]

Sto lavorando ad un sito per un book fotografico: qui la demo.
Lo slide in jQuery è costruito usando gruppi di foto le quali domensioni sono tali da essere identiche al box occupato.
Dato che ho intenzione di dare piena autonomia al mio "cliente" per non obbligarlo a ridimensionare a mano ogni immagine che aggiunge mi occorre poter impostare la posizione della foto nel singolo box in modo che venga centrata sia in orizzontale che in verticale anche se, nel caso l'immagine fosse più grande, si vede solo uan sua parte (in genere quella centrale dove c'è il soggetto principale della foto).

Il css relativo allo slide è questo:

* { margin: 0; padding: 0; }
.content { width: 990px; position: relative; }
span.reference { font-family: Arial; text-align: center; font-size: 10px; display: block; margin-top: 0px; }
span.reference a { color: #999; text-transform: uppercase; text-decoration: none; margin-right: 0px; }
.hs_container { position: relative; width: 990px; height: 514px; overflow: hidden; clear: both; border: 0px solid #fff; cursor: pointer; clip: rect(auto,auto,auto,0px); }
.hs_container .hs_area { position: absolute; overflow: hidden; }
.hs_area img { position: absolute; top: 0px; left: 0px; display: none; }
.hs_area img.hs_visible { display: block; z-index: 9999; }
.hs_area1 { width: 492px; height: 364px; top: 0px; left: 0px; }
.hs_area2 { width: 494px; height: 179px; top: 0px; left: 494px; }
.hs_area3 { width: 494px; height: 183px; top: 181px; left: 494px; }
.hs_area4 { width: 210px; height: 148px; top: 366px; left: 0px; }
.hs_area5 { width: 776px; height: 148px; top: 366px; left: 212px; }


Il codice della pagina in cui compare lo slide jQuery è questo:

<div class="content">
<div id="hs_container" class="hs_container">
<div class="hs_area hs_area1">
<img class="hs_visible" src="img/images/area1/1.jpg" alt=""/>
<img src="img/images/area1/2.jpg" alt=""/>
<img src="img/images/area1/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area2">
<img class="hs_visible" src="img/images/area2/1.jpg" alt=""/>
<img src="img/images/area2/2.jpg" alt=""/>
<img src="img/images/area2/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area3">
<img class="hs_visible" src="img/images/area3/1.jpg" alt=""/>
<img src="img/images/area3/2.jpg" alt=""/>
<img src="img/images/area3/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area4">
<img class="hs_visible" src="img/images/area4/1.jpg" alt=""/>
<img src="img/images/area4/2.jpg" alt=""/>
<img src="img/images/area4/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area5">
<img class="hs_visible" src="img/images/area5/1.jpg" alt=""/>
<img src="img/images/area5/2.jpg" alt=""/>
<img src="img/images/area5/3.jpg" alt=""/>
</div>
</div>
</div>

Questo codice è fatto in modo che ogni gruppo di immagini (hs_area) ha le stesse dimensioni del box div che la ospita ma mi servirebbe che l'immagine venisse centrata sia in orizzontale che in verticale in ogni box a prescindere dalle dimensioni dell'immagine stessa.
Come devo modificarlo per ottenere ciò?