Question

我想在我的某个网页上设置水平和垂直居中的内容。我这样做了。

<!DOCTYPE html>
<html>
  <head>
    <title>Eko</title>
    <%= csrf_meta_tags %>    
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>    
  </head>    
  <body>
    <div class="login-container">    
      <h1>Hello</h1>    
    </div>    
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </body>    
</html>

这是我的CSS。

.login-container {    
    display: flex;
    justify-content: center;
    align-items: center;    
}

但是，垂直中心不会发生（只是水平）。它适用于我应用此CSS。

body {    
    display: flex;
    justify-content: center;
    align-items: center;    
}

为什么它只适用于我们应用于身体？

Answer 1

您的容器没有高度设置，因此它只使用其内容所需的垂直空间，因此不会有垂直居中。如果您将height: 100%应用于它（以及body以具有参考高度），它应该可以正常工作。

Answer 2

此外，您必须提供两者您的html＆amp; body标记高度，例如：

html, body{
    height: 100%;
}

因此，您的容器也是垂直居中的。

Flexbox垂直和水平居中

2 个答案: