Question

looked for other examples but couldn’t find any. my image container uses max-width/max-height so the image scales to the container but I can’t seem to get it to auto margin top/bottom or vertical align it to the middle without setting a height.

html, body {
    width:  100%;
    height: 100%;
    margin: 0px;
}

#container {
    border: solid 1px #000;
    height: 100%;
    width: 65%;
    position: absolute;
    right: 0;
}

#container img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
    vertical-align: middle;    
}​


<div id="container"><img   src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzE2LzAzL3NjcmVlbnNob3QyXzJlb2RkLnBuZwpwCXRodW1iCTg1MHg1OTA+CmUJanBn/5b500a85/9ee/screen-shot-2012-12-14-at-9-45-01-am.jpg" />
</div>​

http://jsfiddle.net/beftR/

Answer 1

I could only get it to work by adding another div named #container2 to your code. I used table/table-cell display type to do it. Here is what I did (jsFiddle here).

html, body {
    width:  100%;
    height: 100%;
    margin: 0px;
}

#container {
    border: solid 1px #000;
    height: 100%;
    width: 65%;
    position: absolute;
    right: 0;
    display:table;
}

#container2 {
    display:table-cell;
    vertical-align:middle;
}

#container img {
    max-width: 100%;
    max-height: 100%;   
}​

<div id="container">
  <div id="container2">
    <img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzE2LzAzL3NjcmVlbnNob3QyXzJlb2RkLnBuZwpwCXRodW1iCTg1MHg1OTA+CmUJanBn/5b500a85/9ee/screen-shot-2012-12-14-at-9-45-01-am.jpg" />
  </div>​
</div>