JQuery неправильно outerWidth() и outerHeight() после изменения размера()

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

Проблема

Если я изменяю размер окна, элемент не центрирован, потому что внешние символыWidth() и outerHeight() ошибочны.

Проблема исчезает после обновления.

Результаты тестирования на Firefox

По умолчанию: Element Размер - 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) 
    }); 
} 

Fiddle here

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

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

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

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

fiddle here

Answer 3

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

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