javascript - 申请位置:absolute to a style via jQuery fails to center div horizontally upon first page load

Question

这是 my question here 的跟进.我想了解为什么通过 jQuery 将 position:absolute 应用于 div 的 CSS 失败，而以静态样式应用它却有效。这是两个 jsfiddle 示例:

作品:http://jsfiddle.net/jasper/Ty6Af/2/

没有工作:http://jsfiddle.net/Ty6Af/3/

请注意，两者之间的唯一区别是我应用 position:absolute 的位置。垂直居中始终有效，但首次加载页面时水平居中不起作用。如果您手动调整窗口大小，div 将正确居中。

到目前为止，我的所有测试都是在 Ubuntu 下的 Chrome 上进行的。

无论如何，我现在才刚刚开始钻研 Web 开发领域，这些正是我需要开始理解的“怪癖”。

编辑:

@Jasper 发现了一些有趣的东西。如果您对 .css() 进行两次调用，首先应用 position 然后应用边距，它会起作用。我很想知道为什么。这是一个例子:http://jsfiddle.net/jasper/Ty6Af/5/

Answer 1

所以问题在于浏览器如何根据其 position 计算 div 的宽度。 .

• 如果 div 设置为 position : static (默认情况下)然后它的宽度是其父级宽度的 100%，并且该元素不允许在页面上移动。
• 如果 div 设置为 position : relative那么它的宽度是其父宽度的 100%，但它可以用 left 移动.
• 如果 div 设置为 position : absolute那么它的宽度由div的实际内容决定，例如如果只有一个200px。宽<span> div 中的元素则 div 将为 200px宽。

您可以通过更改 jsfiddle 的 CSS 以指定 position : relative 来测试这些观察结果(等...)并删除使 div position : absolute 的 JavaScript ，然后使用您的开发人员工具检查元素及其计算宽度。

您的代码的问题是它设置了 position : absolute同时设置margin使用元素的宽度/高度(根据元素的 position 计算不同)。

如果你想设置position在 JavaScript 中的 div 然后你可以做这样的事情:

$(function() {

    //notice I cached the selector so it can be used in the future as well as set the position of the div
    $signuparea = $('#signuparea').css({position : 'absolute'});
    $(window).resize(function() {
        $signuparea.css({
            'margin-top'  : '-' + Math.round($signuparea.height() / 2) + 'px',   
            'margin-left' : '-' + Math.round($signuparea.width() / 2) + 'px',       
        });
    }).trigger('resize');
});

这是一个 jsfiddle:http://jsfiddle.net/jasper/Ty6Af/8/