Горизонтальное центральное динамическое изображение в div с абсолютным положением

Я смотрел по всему Интернету на этот ответ, но мне кажется, что для горизонтального центрирования изображения в div с абсолютной позицией мне нужно знать размеры изображения, но это динамично.

Вот мой 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>

и вот .css, который я использую:

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

Цель состоит в том, чтобы изображение оставалось в нижней части/центре страницы и изменялось в соответствии с окном браузера. Если я слишком усложняю это, не стесняйтесь предлагать альтернативу.

Вот ссылка на js.fiddle:

нижний центр img - js.fiddle

Ответ 1

Если вы хотите, чтобы это была абсолютная позиция, сделайте так:

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

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

Родитель должен иметь относительное положение, или он будет расположен против тела. Вам не нужна ширина для этого, я просто включил ширину, потому что мое изображение настолько велико.

Ответ 2

left = центральное положение - половина ширины изображения

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