高度不固定的div垂直居中

<div style="position:relative;width:100%;height:200px;">
    <div style="position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);">
        </div>
</div>

但是会导致内部div大小比较小,不是很好看.下边这种方式比较完美

$(window).resize(function(){ 
    $(".mydiv").css({ 
        position: "absolute", 
        left: ($(window).width() - $(".mydiv").outerWidth())/2, 
        top: ($(window).height() - $(".mydiv").outerHeight())/2 
    });        
});
$(function(){ 
    $(window).resize(); 
});