我想在一个网页上放置水平和垂直居中的内容。我已经做到了

  
    
    <%= csrf_meta_tags %>    
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>    
      
  
    
    
      
Hello
    
    
    
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
      

这是我的CSS。

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

但是，不会出现垂直中心（只是水平）。当我应用此CSS时，它可以工作。

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

为什么只有在将其应用于身体时才起作用？

您的容器没有高度设置，因此它仅使用容器内容所需要的垂直空间，因此将没有垂直居中。如果您要应用height: 100%它（并同时body具有参考高度），它应该可以按需工作。