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

Question

Я посмотрел по всему миру на этот ответ, но мне кажется, что для горизонтального центрирования изображения в 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:

bottom-centered img - js.fiddle

Answer 1

Если вы хотите, чтобы это было абсолютное положение сделать это следующим образом:

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

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

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

Answer 2

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

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