Javascript jQuery resize（）之后错误的outerWidth（）和outerHeight（）

HTML

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

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

问题

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

注释

---

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

请检查小提琴

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

内容


moooore内容


另一内容
html，正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
显示：表格；
}
.集装箱{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
}
.内容{
背景色：红色；
显示：内联块；
文本对齐：左对齐；
}

---

这是因为您正在使用jQuery动画。因此，在调整窗口大小时，每次都会触发重新调整大小。但是在短时间延迟内，动画无法完成。这样箱子就不会到中间去了。但调整大小后，它有足够的时间执行动画

---

因此，将动画更改为直接css，您可以在每次调整大小时进行更新。请选中此项

仅在页面加载时调用调整大小，请尝试将代码设置为：

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)
    });
}

这将在页面加载时调用resize，以及在出现resize时调用resize

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

---

也许你想考虑使用一个非动画方法来处理你的元素，比如Abdulla Chozhimadathil提到的一个元素。

<代码> OutWelds不能保证如DOCS中所描述的那样精确。只需编写

outerWidth（true）

即可获得

.resize（）

函数中的精确值。

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)
    });
}