Question

不是网络人我不知道HTML的所有怪癖。我试图将一些动态大小的内容集中在div中。这个内容应该始终居中，所以我迷上了window.resize来做这件事。然后我在应用CSS后手动调用window.resize()以强制它运行一次。

问题是div不是第一次水平居中，而是垂直居中。后续窗口调整大小强制div正确居中。

最初我认为我必须尝试将div放在“准备好”之前，因为我在 document.ready之前先调用它，但垂直居中工作并且我添加了一些跟踪陈述，当然，left位置正在正确计算，只是没有应用（看似）。

无论如何，这是我第一次真正涉足HTML + CSS，所以我相信你们会很快发现它。这里有一些示例html和javascript来重现问题。

此外，到目前为止，我的测试专门用于Chrome。

<html lang="en-US"> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(window).resize(function() { var win = $(window); var area = $('#signuparea'); $('#signuparea').css({ position: 'absolute', left: (win.width() - area.outerWidth()) / 2, top: (win.height() - area.outerHeight()) / 2 }); //$('body').append('<div>l=' + ((win.width() - area.outerWidth()) / 2) + '</div>'); //$('body').append('<div>w=' + area.outerWidth() + '</div>'); //$('body').append('<div>h=' + area.outerHeight() + '</div>'); }); $(window).resize(); }); </script> </head> <body style="background-color:0000FF"> <div id="signuparea"> <input type="password"> </div> </body> </html>

Answer 1

如何在window.resize事件处理程序中使用此代码：

$('#signuparea').css({
    position      : 'absolute',                       
    left          : '50%',
    top           : '50%',
    'margin-top'  : '-' + Math.round(area.height() / 2) + 'px',
    'margin-left' : '-' + Math.round(area.width() / 2) + 'px'
});

由于上面设置的三个属性是静态的，因此可以在CSS中设置：

#signuparea {
    position : absolute;
    top      : 50%;
    left     : 50%;
}

这使得你的JS看起来像这样：

$(function() {
    $(window).resize(function() {
        var area = $('#signuparea');
        $('#signuparea').css({
            'margin-top'  : '-' + Math.round(area.height() / 2) + 'px',   
            'margin-left' : '-' + Math.round(area.width() / 2) + 'px',       
        });
    }).trigger('resize');
});

以下是此解决方案的一个方面：http://jsfiddle.net/jasper/Ty6Af/2/

Answer 2

如果你给div一个宽度，那么margin: 0 auto将它居中（零可以替换为顶部和底部边距的内容，左边/右边距需要auto。

抱歉，错过了absolute。这需要left: 50% margin-left: -??？是你div的宽度的一半。

以动态大小的div为中心

2 个答案: