jquery - 为什么 div 不是水平和垂直居中？

Question

我正在尝试使 Logo 水平和垂直居中。到目前为止我有这个......

<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>

可在 http://septemberstudio.co.uk/ 查看实时版本

Answer 1

试试这个，

脚本

function resizeMe() {
    $('#theLogo').css({
        position: 'absolute',
        left: ($(window).width() - $('#theLogo').outerWidth()) / 2,
        top: ($(window).height() - $('#theLogo').outerHeight()) / 2,
    });
}
$(document).ready(function () {
    $(window).resize(function () {
        resizeMe();
    });
    resizeMe();
});

CSS

#theLogo {
    width:50%;
    border:1px solid red;/* for testing */
}

Demo和 Demo without Css

尝试不使用脚本，例如，

CSS

#theLogo{
    margin: 0 auto;
    position:absolute;
    left:0;
    right:0;
    width:100px;
}

Css Demo