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

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

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.

Answer 1

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.

Answer 2

Please check the fiddle

<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

Answer 3

This is due to, you are using the jQuery animation. So while resize the window, each re-sizing is triggered each time. But within that short time delay the animation doesn't complete. So that the box doesn't come to the center. But after resizing it have enough time to perform the animation.

So change the animate to direct css, and you can update in each resize. Please check this Fiddle

Answer 4

outerWidth is not guaranteed to be accurate as stated in docs. Simply write outerWidth(true) and you will get the exact value as on .resize() function. http://api.jquery.com/outerWidth/