垂直居中的内容

Question

我遇到了滑块中垂直居中内容的问题，我已经成功调整了大小，但由于某些原因，我的javascript在页面加载时无效。

我觉得这可能是因为内容定位于绝对位置并且在加载时可能没有高度值？但这只是一个疯狂的猜测。

以下是示例：DEMO

<div id="slides">
    <ul class="slides-container">
        <li>
            <div class="slider_content">
                <h1>Some Text</h1>
                <p>Quisque ultrices, libero eget aliquet consequat, sapien leo sollicitudin ligula, fermentum luctus enim libero a neque. Nam dapibus, lectus nec condimentum volutpat, diam nisl cursus odio, vitae luctus libero augue at dolor. Nullam ut quam ut augue facilisis ultrices eget non risus.</p>
            </div>

            <img src="http://nicinabox.com/superslides/images/building.jpg" width="1024" height="682" alt=""/>

        </li>
    </ul>
</div>

// VERTICALLY ALIGNS THE SLIDER CONTENT ON LOAD (NOT WORKING)

$(window).load(function() {
    $('.slider_content').each(function(event) {
        $(this).css({"margin-top": - ( $(this).outerHeight()/2 ) });
    });
});

// VERTICALLY ALIGNS THE SLIDER CONTENT ON RESIZE (WORKING)

$(document).ready(function() {
    $(window).resize(function() {
        $('.slider_content').each(function(event) {
            $(this).css({"margin-top": - ( $(this).outerHeight()/2 ) });
        });
    });
});

感谢您的帮助！