当窗口大小改变时如何改变元素的位置？

Question

我有一个简单的HTML形式的搜索：

<div class="mainWindow">
    <form action="#">
        <input type="text" id="query" placeholder="Search..." autofocus required />
        <input type="button" id="button" value="SEARCH" />
    </form>
</div>

我使用jQuery的代码将mainWindow的默认位置div更改为窗口的中心：

$(document).ready(function() {
    mainWindowInCenter();
});

function mainWindowInCenter() {
    $('.mainWindow').css('position','fixed');
    $('.mainWindow').css("left", ($(window).width()/2-$('.mainWindow').width()/2) + "px");
    $('.mainWindow').css("top", ($(window).height()/2-$('.mainWindow').height()/2) + "px");
};

但是它只能运行一次 ，当我更改浏览器的窗口时，div在脚本之后保持在相同位置。

我需要做的是，当窗口的大小也改变时，div始终改变它的位置吗？
我可以以某种方式跟踪窗口的调整大小吗？ 例：

$(document).ready(function() {
    if (window.size.isChange()) {
    mainWindowInCenter();
    };
});

Answer 1

您可以通过挂钩到resize事件来resize窗口大小，从而调用函数：

$(window).on('resize', function() {
  mainWindowInCenter();
});

function mainWindowInCenter() {
  $('.mainWindow').css({
    position: 'fixed',
    left: $(window).width() / 2 - $('.mainWindow').width() / 2,
    top: $(window).height() / 2 - $('.mainWindow').height() / 2
  });
}

单独使用CSS也可以实现相同的效果，这将是更可取的。 但是，是否可行取决于您的HTML结构。

Answer 2

您不应该为此使用任何JavaScript。

如果您的元素的宽度/高度是静态的，则应该给它以下CSS：

.mainWindow {
    position: fixed;
    width: 500px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin-top: -100px; /* Negative half of height. */
    margin-left: -250px; /* Negative half of width. */
}

而且，无论窗口事件如何，它都将居中，并且在绑定到resize事件时可以避免性能问题。