Javascript 垂直居中内容

我遇到了一个问题，在滑块内垂直居中的内容，我已经设法让它在调整大小时工作，但我的javascript在页面加载时由于某种原因无法工作

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

以下是示例：

一些文本
乌尔特里斯，自由女神，智者利奥·索利西图丁·利古拉，自由女神的发酵液。Nam dapibus，Evolvat Pat的nec调味品讲演，diam nisl cursus odio，多洛的自由奥古斯生命。这是一个很好的解决办法



//加载时垂直对齐滑块内容（不工作）
$（窗口）。加载（函数（）{
$（'.slider_content'）。每个（函数（事件）{
$（this.css（{“margin top”：-（$（this.outerHeight（）/2）}）；
});
});
//调整大小时垂直对齐滑块内容（工作）
$（文档）.ready（函数（）{
$（窗口）。调整大小（函数（）{
$（'.slider_content'）。每个（函数（事件）{
$（this.css（{“margin top”：-（$（this.outerHeight（）/2）}）；
});
});
});

---

谢谢你的帮助

这一切难道不能用CSS3和

转换：translate

完成吗。我总是这么做。@Paulie_D可能吧，但是浏览器支持不是很好，这就是我为什么选择javascript的原因。。。。CSS也不能为每个内容div都这样做，是吗？（对于滑块的每个幻灯片，因为每个幻灯片上的内容大小不同）对于使用纯CSS垂直居中的内容，我也发现了这一点。它也适用于较旧的浏览器。@最后试试catch好的，我已经设法让它工作了。。。。你知道当内容达到100%宽度时，我如何阻止它断裂吗？（缩小窗口，直到文本到达侧面）

<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 ) });
        });
    });
});