Flexbox垂直和水平居中

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和body标签的高度，比如：

html, body{
    height: 100%;
}

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

Flexbox垂直和水平居中

问题描述

2 个解决方案

解决方案1
5 已采纳 2017-03-21 20:44:01

解决方案2
0 2018-02-27 14:26:05

Flexbox垂直和水平居中

问题描述

2 个解决方案

解决方案1 5 已采纳 2017-03-21 20:44:01

解决方案2 0 2018-02-27 14:26:05

解决方案1
5 已采纳 2017-03-21 20:44:01

解决方案2
0 2018-02-27 14:26:05