使用 jQuery 将 div 居中 - 在页面加载时 div 被加载到右侧 rails 5 , semantic-ui

Question

所以我是 jQuery 的新手，我试图垂直和水平移动到页面，但是在初始页面加载时，登录表单正在加载向右偏移一点。如果我在浏览器中并将屏幕拖动得更宽或更小，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
}

使用 jQuery 将 div 居中 - 在页面加载时 div 被加载到右侧 rails 5 , semantic-ui

Centering a div using jQuery - on page load div is loaded offset to the right rails 5 , semantic-ui

html

css

jquery

ruby-on-rails

semantic-ui