垂直对齐流体容器中的图像

Question

寻找其他例子，但找不到任何。我的图像容器使用最大宽度/最大高度，因此图像缩放到容器，但我似乎无法将它设置为自动上边距/下边距或垂直对齐而不设置高度。

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

我只能得到它通过添加另一个div命名为#container2你的代码工作。我用table/table-celldisplay类型来做到这一点。这是我做的（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>