调整大小（）后jQuery错误的outerWidth（）和outerHeight（）答案

【问题标题】：jQuery wrong outerWidth() and outerHeight() after resize()调整大小（）后jQuery错误的outerWidth（）和outerHeight（）
【发布时间】：2014-11-20 02:54:33
【问题描述】：

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（刷新后良好）

问题

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

备注

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

【问题讨论】：

标签： javascript jquery window-resize outerheight outerwidth

【解决方案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 提到的那个。

【讨论】：

【解决方案2】：

请检查小提琴

<div class="container">
    <div class="content">
        content content content 
        <br/>
        moooooooooooooooore content
        <br/>
        another content
    </div>
</div>

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table;
}
.container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.content {
    background-color: red;
    display: inline-block;
    text-align: left;
}

fiddle here

【讨论】：

【解决方案3】：

这是由于，您使用的是 jQuery 动画。因此，在调整窗口大小时，每次都会触发每次调整大小。但在这么短的时间延迟内，动画并没有完成。这样盒子就不会来到中心。但调整大小后，它有足够的时间来执行动画。

所以把动画改成直接css，每次resize都可以更新。请检查此Fiddle

【讨论】：

【解决方案4】：

outerWidth 不保证如文档中所述准确。只需编写outerWidth(true)，您将获得与.resize() 函数相同的确切值。 http://api.jquery.com/outerWidth/

【讨论】：