javascript - 高さが不明な div を垂直方向にセンタリングする

Question

#boxウィンドウの上部と下部から一定の割合で絶対に配置されたページにdiv ( ) があります。当然、これはウィンドウのサイズが変更されるとサイズが変更されます。

この div 内には、数行から数段落までのコンテンツがあります。このコンテンツを常に垂直方向の中央に配置し、#boxの高さを超えないようにしたいと考えています。必要に応じてメイン コンテンツをオーバーフローさせます。

HTML:

<div id="box">

    <div id="content">
        <h1>HEADING</h1>
        <div id="left">
            <p>
            // Lorem ipsum etc...
            </p>
        </div>
    </div>

</div>

CSS:

#box{
    position:absolute;
    top:15%; bottom:15%;
    background:white;
    left:50%;
}
#content{
    position:absolute;
    top:50%;
    overflow:auto;
    background:lightgrey;
}

jQuery(JavaScript):

function alignContent(){

    // Position box
    $box = $('#box');
    $box.css({
        'width' : $box.height() + 'px',
        'margin-left' : '-' + $box.height()/2 + 'px'
    });

    // Position content
    $content = $('#content');
    console.log( $content.outerHeight() );
    $content.css({
        // Set maxheight smaller for aesthetic purposes
        'max-height' : $box.height()-72 + 'px',
        'margin-top' : '-' + ($content.outerHeight()/2) + 'px'
    });
}
alignContent();

// Update when resized
$(window).resize(function(){
    alignContent();
});

それが機能するのを見てください。

アプローチは - 私が思うに - 非常に単純で、ほとんどの場合うまくいきます。この問題は、#boxページの読み込みに対してコンテンツが高すぎる場合に発生します - コンテンツが正しく配置されていません (console.log が間違った値を返すことにも注意してください)。サイズを変更すると、すべてが再び正しく整列されます。

コンテンツがコンテナーよりも高い場合、ページの読み込み時に正しく配置されない原因は何ですか?簡単に修正できますか?

編集：「中心」と綴る私の英国の傾向を許してください