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

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的代码改变默认的位置主窗口的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事件大小：

$(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事件时。