Edit Question - KnowledgeHub

Title Body

I have looked all over the web for this answer but it seems to me that in order to horizontally center an image in div with absolute position, I need to know the dimensions of the image, but it's dynamic. Here is my 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> and here is the .css I'm using: #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; } The goal is just to have the image stay at the bottom/center of the page and re-size to fit the browser window. If I'm over-complicating this, please feel free to suggest an alternative. Here is a link to a js.fiddle: bottom-centered img - js.fiddle

Tags (comma-separated) Cancel