vertically centering a block of content

HTML

<section>
    <div id="content-block">
        <p> this is the test caption this is the test caption </p>
        <img src="http://24.media.tumblr.com/tumblr_m7st39a2kj1qaynrlo1_500.jpg"/>
    
    </div>    
    
</section>

CSS

body {
    margin: 0;
}


section {
    height: 100%;
}

section img{
  width:100%;
  position:absolute;
    top:0;
    left:0;
    z-index:-1;
}

#content-block {
    display: inline-block;
    line-height: normal;
    vertical-align: middle;
    text-align:center;
    margin:0 auto;
    width:400px;
}

JavaScript

var $window = $(window);

$window.on('resize', function(){

    var window_height = $window.height();
    
    var content_block_height = $('#content-block').height();
    
    // the line-height should be at least the heiht of the content block, so we don't want the content block to be cut off
    
    var applied_height = Math.max(window_height, content_block_height) + 'px';
    
    $('section').css({
        'font-size': '16px',
        'height': applied_height,
        'line-height': applied_height
    });


});


// just triggering the window.resize event so you can see what's happening right away.
$window.trigger('resize')