Image dynamique centrale horizontale en div avec position absolue

J'ai cherché sur le web pour cette réponse, mais il me semble que, pour horizontalement centre d'une image dans une div avec la position absolue, j'ai besoin de connaître les dimensions de l'image, mais c'est dynamique.

Voici mon code 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>

et voici le .css que j'utilise:

#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;
}

Le but est juste d'avoir l'image rester en bas/centre de la page et ré-ajuster la taille de la fenêtre du navigateur. Si je suis sur-complique la situation, n'hésitez pas à proposer une alternative.

Voici un lien vers un js.violon:

bas-centré img - js.violon

source d'informationauteur Ben Cohn

  1. 59

    Si vous voulez qu'il soit de la position absolue de faire comme ceci:

    http://jsbin.com/aveped/1/edit

    img {
  width:20%;
  display:block;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
}

    Le parent doit avoir une position relative, ou il sera positionné contre le corps.
    Vous n'avez pas besoin de la largeur, pour cela, j'ai simplement compris largeur, car mon image est si grand.

  2. 0

    gauche = position centre de la moitié de la largeur de l'image

    img {
   position: absolute;
   bottom: 0;
   left: 50%; /*half the container width*/
   margin-left: -250px; /*half the width of the image*/
}