title: Centering a div using jQuery - on page load div is loaded offset to the right rails 5 , semantic-ui
body: <p>So I am newish to jQuery, I am attempting to vertically and horizontally to the page, however on the initial page load the login-form is loading offset a bit to the right. if i am in the browser and drag the screen wider or smaller the div centres its self on the screen, however on a mobile device, where you can not expand the screen it wont recenter its self. </p>
  
  <p>her is the code i am using for the jQuery:</p>
  
  <pre><code>$(window).resize(function(){
  
    $('.login-form').css({
      position:'absolute',
      left: ($(window).width() - $('.login-form').outerWidth())/2,
      top: ($(window).height() - $('.login-form').outerHeight())/2
    });
  
  });
  </code></pre>
  
  <p>and then in the view I have:</p>
  
  <pre><code>&lt;script&gt;
    $(window).resize();
  &lt;/script&gt;
  </code></pre>
  
  <p>and my login form css:</p>
  
  <pre><code>  /* Login Screen */
    .login-form{
      height: auto;
      width: 80%;
    }
  </code></pre>
  
  <p>and for brevity here is my login page form:</p>
  
  <pre><code>&lt;div class="ui stacked segment login-form"&gt;
  
    &lt;section class="login-header animated slideInUp"&gt;
      &lt;center&gt;
        &lt;%= render partial: 'shared/pv_login' %&gt;
      &lt;/center&gt;
    &lt;/section&gt;
  
    &lt;section&gt;
      &lt;div class="ui form"&gt;
        &lt;%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %&gt;
        &lt;center&gt;
          &lt;div class="eleven wide field"&gt;
            &lt;div class="ui left icon input"&gt;
              &lt;i class="user icon"&gt;&lt;/i&gt;
              &lt;input type="email" name="user[email]" placeholder="E-mail address"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="eleven wide field"&gt;
            &lt;div class="ui left icon input"&gt;
              &lt;i class="unlock icon"&gt;&lt;/i&gt;
              &lt;input type="text" name="user[password]" placeholder="Password"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="inline field"&gt;
            &lt;div class="ui checkbox"&gt;
              &lt;input name="user[remember_me]" type="hidden" value="false" /&gt;
              &lt;input type="checkbox" id="remember_me" name="user[remember_me]" value="true" /&gt;
              &lt;label&gt;Remember me&lt;/label&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="button-group"&gt;
            &lt;div class="ui buttons"&gt;
              &lt;%= f.submit "Sign In", :class =&gt; 'ui positive button', :id =&gt; 'sign-in-button' %&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/center&gt;
        &lt;% end %&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance for your assistance! please let me know if you require anything further!</p>