StackOverflow: Vertically centered element with minimum marg

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Demo</title>

        <style type="text/css">
            *{ margin: 0; padding: 0; }

            div#head
            {
                height: 200px;
                background: blue;
            }

            div#foot
            {
                height: 100px;
                background: red;
            }

            div#slideshow
            {
                height: 300px;
                background: green;
            }
        </style>

        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript">

            $(window).resize(fix);
            $(document).ready(fix);

            function fix()
            {
                var base = $("div#slideshow").position().top;
                var middle = $(window).height() / 2;
                var hw = $("div#slideshow").height() / 2;

                var destination = Math.max(middle - base - hw, 0);
                $("div#shell").offset({ top: destination });
            }

        </script>
    </head>

    <body>
        <div id="shell">
            <div id="head">Header.</div>
            <div id="slideshow">Slideshow.</div>
            <div id="foot">Footer.</div>
        </div>
    </body>
</html>