javascript - jQuery 在 resize() 之后错误的 outerWidth() 和 outerHeight()

Question

HTML

<div class="element">
    <p>I want to center this element vertically and horizontally.</p>
</div>

CSS

.element
{
    background: #eee;
    border: 1px solid #ccc;
    font-size: 24px;
    margin: 10px;
    padding: 20px;
    position: absolute;
}

jQuery

jQuery(document).ready(function($) {
    var $element = $('.element');

    center();

    $(window).on('resize', function() {
        center();
    });

    function center() {
        var width = $element.outerWidth(true);
        var height = $element.outerHeight(true);

        console.log(width);
        console.log(height);

        $element
            .stop(true)
            .animate({
                top: Math.max(0, ($(window).height() - height) / 2),
                left: Math.max(0, ($(window).width() - width) / 2)
            });
    }
});

问题

如果我调整窗口大小，元素不会居中，因为 outerWidth() 和 outerHeight() 是错误的。

刷新后问题消失

在 Firefox 上的测试结果

默认:元素大小 - 670x134(良好)

768x1024:元素大小 - 198x254(错误)- 670x134(刷新后良好)

360x640:元素大小 - 198x254(错误)- 360x182(刷新后良好)

问题

知道为什么会出现这个问题以及如何解决它吗？

注意事项

我不希望元素具有固定的宽度或高度。

Answer 1

您的调整大小仅在页面加载时调用，请尝试使用您的代码:

jQuery(document).ready(function() {
    center();
});

jQuery(window).resize(function(){
    center();
});

function center() {
    var $element = $('.element');
    var width = $element.outerWidth(true);
    var height = $element.outerHeight(true);

    console.log(width);
    console.log(height);

    $element
    .stop(true)
    .animate({
        top: Math.max(0, ($(window).height() - height) / 2),
        left: Math.max(0, ($(window).width() - width) / 2)
    });
}

Fiddle here

这将在页面加载时以及调整大小时调用调整大小。

当从较大的窗口调整到较小的窗口时，元素水平居中似乎有延迟，这很可能与动画有关。

也许您可能想考虑使用一种非动画方法来使您的元素居中，例如 Abdulla Chozhimadathil 提到的方法。