I'm trying to centre a logo in the middle of the browser. I have this so far...

<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();
    });

HTML

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

I'm trying to centre this bit:

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

Live version here