如何在窗口大小改變時更改元素的位置？

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事件時。