在div中垂直對齊img，高度爲100％

Question

我想找到一個解決方案，如何垂直對齊100％高度的div（我不知道它的高度）。

我有這個HTML。我不能做與HTML不同的是加入更多的包裝：

<div id="wrapper"> 
    <img src="http://www.lovecpokladu.cz/nalezy/9687/5.jpg" alt="" /> 
</div>​ 

這相當固定的CSS - 初級我需要完成的圖像並非在所有瀏覽器中溢出瀏覽器窗口：

#wrapper { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: #ddd;   
} 
img { 
    max-width: 100%; 
    max-height: 100%; 
} 

http://jsfiddle.net/2nkVm/

非常感謝！

Answer 1

試試這個：

img { 
    display:block; 
    position:absolute; 
    top:50%; 
    margin-top:"negative margin based on half of image height"; 
} 

更新您的提琴：

http://jsfiddle.net/2nkVm/3/

Answer 2

$(document).ready(function() { 
    positionImage(); 
    $(window).resize(function() { 
     positionImage(); 
    }); 
}); 
function positionImage() { 
    var wrapperHeightOffset = $('#wrapper').height() - $('#wrapper img').height(); 
    var wrapperHeightOffset = wrapperHeightOffset/2; 
    $('#wrapper').css('paddingTop', wrapperHeightOffset + 'px'); 
}