jQueryを使用してdivをセンタリングする - divのロードdivが右のレールにオフセットされてロードされる5、semantic-ui

Question

jQueryを新しくしているので、ページを縦横にしようとしています。 login-formは少しオフセットを右にロードしています。私がブラウザにいて、画面の幅を広げたり小さくしたりすると、画面上に自己の中心が表示されますが、画面を展開できないモバイルデバイスでは、自己を見直すことはできません。

彼女は、私はjQueryのために使用していますコードです：

$(window).resize(function(){ 

    $('.login-form').css({ 
    position:'absolute', 
    left: ($(window).width() - $('.login-form').outerWidth())/2, 
    top: ($(window).height() - $('.login-form').outerHeight())/2 
    }); 

}); 

、その後、私が持っているビューで：

<script> 
    $(window).resize(); 
</script> 

と私のログインフォームのCSS：

/* Login Screen */ 
    .login-form{ 
    height: auto; 
    width: 80%; 
    } 

わかりやすくするためにここに私のログインページのフォームがあります：

<div class="ui stacked segment login-form"> 

    <section class="login-header animated slideInUp"> 
    <center> 
     <%= render partial: 'shared/pv_login' %> 
    </center> 
    </section> 

    <section> 
    <div class="ui form"> 
     <%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> 
     <center> 
     <div class="eleven wide field"> 
      <div class="ui left icon input"> 
      <i class="user icon"></i> 
      <input type="email" name="user[email]" placeholder="E-mail address"> 
      </div> 
     </div> 

     <div class="eleven wide field"> 
      <div class="ui left icon input"> 
      <i class="unlock icon"></i> 
      <input type="text" name="user[password]" placeholder="Password"> 
      </div> 
     </div> 

     <div class="inline field"> 
      <div class="ui checkbox"> 
      <input name="user[remember_me]" type="hidden" value="false" /> 
      <input type="checkbox" id="remember_me" name="user[remember_me]" value="true" /> 
      <label>Remember me</label> 
      </div> 
     </div> 

     <div class="button-group"> 
      <div class="ui buttons"> 
      <%= f.submit "Sign In", :class => 'ui positive button', :id => 'sign-in-button' %> 
      </div> 
     </div> 
     </center> 
     <% end %> 
    </div> 
    </section> 

</div> 

ご協力いただきありがとうございます。さらに何かが必要な場合は私にお知らせください！

Answer 1

ログイン・フォームの幅と高さを知っている場合は、これがそうのようにCSSで簡単に行うことができます。

.login-form { 
    top:50%; 
    margin-top:-200px; //this value should be half of the height of login-form 
    left:50%; 
    margin-left:-150px; // this value should be half of the width of login-form 
}