He buscado en toda la web esta respuesta, pero me parece que para centrar horizontalmente una imagen en div con una posición absoluta, necesito saber las dimensiones de la imagen, pero es dinámica.

Aquí está mi html:

<header>
<div id="elogo">
    <img src="http://www.ftiweb.com/images/eStore/eStore_wht50.png">
</div>
<div id="nav">TOUR | MENU</div>
</header>
<div id="content">
<img class="ipad" src="http://ftiweb.com/images/eStore/Ipad_hand.png">
</div>
<footer>
<div id="foot">&#169; FTIeStore 2013 &bull; Privacy Policy</div>
</footer>

y aquí está el .css que estoy usando:

#content {
width: 70%;
height: 80%;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -35%;
display: table-cell;

img.ipad {
max-width: 100%;
max-height: 100%;
position: absolute;
bottom: 0px;
display: block;
}

El objetivo es que la imagen permanezca en la parte inferior / central de la página y se vuelva a clasificar según el tamaño para que se ajuste a la ventana del navegador. Si estoy complicando esto, siéntase libre de sugerir una alternativa.

Aquí hay un enlace a un js.fiddle:

img centrada en la parte inferior - js.fiddle