为什么div不能水平垂直居中？

我正在尝试将徽标水平垂直居中。我已经有了以下代码...

<script type="text/javascript">
    $(document).ready(function(){
        $(window).resize(function(){
            $('#theLogo').css({
                position:'absolute',
                left: ($(window).width() - $('#theLogo').outerWidth())/2,
                top: ($(window).height() - $('#theLogo').outerHeight())/2
            });
        });
        $(window).resize();
    });
</script>

HTML

<div id="theLogo">
    <section id="responsiveLogo" class="logo">September</section>
</div>

我正在尝试将这部分居中显示：

<section id="responsiveLogo" class="logo">September</section>

Live版本可以在http://septemberstudio.co.uk/上查看。