Центрирование div с помощью jQuery - на странице load div загружается смещение вправо rails 5, semantic-ui

Question

Так что я новичок в jQuery, я пытаюсь по вертикали и горизонтали на странице, однако на начальной странице загружаются login-form загружает смещение вправо. если я нахожусь в браузере и перетаскиваю экран более широкий или меньший, div центрирует себя на экране, однако на мобильном устройстве, где вы не можете расширять экран, он не будет возвращать себя.

ей это код, я использую для 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 
}