vertikal = bottom, horisontal = center af img i div, hvordan??

Jeg har et div med en fast størrelse, hvori jeg ønsker et img placeret.
Jeg ønsker at img skal vertikalt justeres til bottom og horisontalt centreres.
Dimensionerne på img er mindre end størrelsen på div, men kan variere på et lukket interval.
Løsningen skulle gerne virke på diverse browsers, IE5+, firefox osv.

Jeg hat halvt løst problemet i IE7 og firefox via css hacks jeg fandt på google.
Der er dog problemer med img som blok element der tvinger en newline, og derved forhindre img ligger sig helt i bunden af div.
Dette kan løses vha. float:left, men så mister jeg jo min centrering.
I IE5 er img ikke centreret.

Problemet kan ses på:
http://www.student.dtu.dk/~s052972/eksperten/div_img.html
Øverste box viser den newline under img jeg ikke ønsker.
Nederste box er med float:left hvor der ikke er nogen newline, men hvor min centrering altså er ødelagt.

Min nuværende kildekode er som følger:
<div style="background-color:blue;display: table;width:400px; height: 400px;  #position: relative; overflow: hidden;">
  <div style=" #position: absolute; #top: 100%;display: table-cell; vertical-align: bottom;">
    <div style=" #position: relative; #top: -100%;text-align:center;">
      <div style="margin:0 auto;min-width:1px;">
        <img style="" src="TestAlbum.jpg" alt="Testgfx" />
      </div>
    </div>
  </div>
</div>