Centre div unknown height

by Curry

HTML

<div id="main">
    <div id="box">
        
        <div id="content">
            <h1>HEADING</h1>
            <div id="left">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget diam in mi facilisis condimentum. Nullam at arcu erat. Nullam elit libero, sodales sit amet pellentesque et, hendrerit vitae arcu. Ut sit amet erat et dui lobortis tristique. Aenean sit amet nunc at nibh volutpat venenatis. Fusce euismod arcu id nunc auctor sagittis.</p>
            </div>
        </div>

    </div>
</div>

CSS

#main {
    position:absolute;
    top:0; left:0; right:0; bottom:0; background:lightblue;
    text-align:center;
    font-family:arial;
}
#box{
    position:absolute;
    top:15%; bottom:15%;
    background:white;
    left:50%;
}
#content{
    position:absolute;
    top:50%;
    overflow:auto;
    background:lightgrey;
}

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({
        'max-height' : $box.height()-72 + 'px',
        'margin-top' : '-' + ($content.outerHeight()/2) + 'px'
    });
}
alignContent();

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