jQuery неправильно externalWidth() и outerHeight() после 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)
            });
    }
});

Эта проблема

Если я изменяю размер окна, элемент не центрируется, потому что externalWidth() и 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)
    });
}

Скрипка здесь

Это будет вызывать изменение размера при загрузке страницы, а также всякий раз, когда происходит изменение размера.

Кажется, что существует задержка в центрировании элемента по горизонтали при изменении размера от большего окна к меньшему, это, скорее всего, связано с анимацией.

Возможно, вы захотите использовать неанимированный метод для центрирования вашего элемента, такой как тот, который упоминал Абдулла Чожимадатил.

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

возиться здесь

Answer 3

outerWidthточность, указанная в документации, не гарантируется. Просто напишитеouterWidth(true) и вы получите точное значение, как на .resize()функция. http://api.jquery.com/outerWidth/

Answer 4

Это связано с тем, что вы используете анимацию jQuery. Таким образом, при изменении размера окна каждое изменение размера запускается каждый раз. Но за это короткое время анимация не завершается. Так что коробка не доходит до центра. Но после изменения размера у него будет достаточно времени для выполнения анимации.

Так что измените анимацию на прямую css, и вы сможете обновлять каждый размер. Пожалуйста, проверьте это Fiddle