title: How to change a position of element when a window size changes?
body: <p>I have a simple search's form in HTML:</p>
  
  <pre><code>&lt;div class="mainWindow"&gt;
      &lt;form action="#"&gt;
          &lt;input type="text" id="query" placeholder="Search..." autofocus required /&gt;
          &lt;input type="button" id="button" value="SEARCH" /&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I use the jQuery's code for change the default position mainWindow's div to center of the window:</p>
  
  <pre><code>$(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");
  };
  </code></pre>
  
  <p>but <strong>it works only one time</strong> and when I change my browser's window, the div stay in the same position after the script.<br/></p>
  
  <p>What I need to do that the div change it position all times when the window's size is changing too?<br/>
  Can I trace the window's resize somehow? Example:</p>
  
  <pre><code>$(document).ready(function() {
      if (window.size.isChange()) {
      mainWindowInCenter();
      };
  });
  </code></pre>