jquery - Jquery - 垂直中央の div は、ウィンドウのサイズを変更する場合にのみ機能します

Question

特定のリンクをクリックすると表示される Div がいくつかあります。クラス名が「position-center」の div は、画面の垂直方向の中央に配置されます。しかし、問題は、ウィンドウのサイズを変更するまで、ロード時に div が中心からオフセットされることです。

問題データベースを検索しようとしましたが、問題の解決策が見つからないようです。

div をセンタリングして表示するための Javascript コード:

onResize = function() {
        var topPos = ($(window).height() - $('.position-center').outerHeight())/2;
        $('.position-center').css({
            top: topPos > 0 ? topPos : 0
        });
    };
    $(document).ready(function() {
        $(onResize);
        $(window).resize(onResize);
        $(".modal-button").click(function(){
            $("divs:visible").hide();
            $("#"+$(this).attr("data-showdiv")).show();
        });
        $('.abort').click(function() {
            $("div.modal-background").hide();
        });
    });

Div の 1 つの HTML

 <div class="modal-background" id="modal-1">
    <div class="modal-window">
        <div class="modal-content position-center">
            <span class="title">Modal #2</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#" class="button abort"><span>Abort</span></a>
        </div>
    </div> 

div を呼び出すためのリンク:

<a class="modal-button" data-showdiv="modal-1" href="#"><span>SHOW DIV</span></a>

ありがとう！