jQuery wrong outerWidth() and outerHeight() after resize()

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

The Problem

If I resize the window, the element isn’t centered because the outerWidth() and outerHeight() are wrong.

The problem disappears after refresh.

Test Results on Firefox

Default: Element Size - 670x134 (good)

768x1024: Element Size - 198x254 (wrong) - 670x134 (good after refresh)

360x640: Element Size - 198x254 (wrong) - 360x182 (good after refresh)

Question

Any idea why this problem occurs and how to fix it?

Notes

I don’t want the element to have a fixed width or height.

Your resize is only called on page load, try having your code as this:

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

This will call the resize on the page load as well as whenever there is a resize.

There does seem to be a delay in centring the element horizontally when resizing from a larger window to a smaller one, this is most likely to do with the animation.

Perhaps you might want to consider using a non-animated method to centre your element such as the one that Abdulla Chozhimadathil mentioned.