Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/35.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html Flexbox垂直和水平居中_Html_Css_Flexbox - Fatal编程技术网
Fatal编程技术网
  • html/
  • Html Flexbox垂直和水平居中

Html Flexbox垂直和水平居中

html css

Html Flexbox垂直和水平居中,html,css,flexbox,Html,Css,Flexbox,我想在我的一个网页上有一个水平和垂直居中的内容。我是这样做的 <!DOCTYPE html> <html> <head> <title>Eko</title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %

我想在我的一个网页上有一个水平和垂直居中的内容。我是这样做的

<!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时，它就工作了

body {    
    display: flex;
    justify-content: center;
    align-items: center;    
}
为什么只有当我们把它应用到身体上时它才起作用

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

此外，您必须为两个您的html和body标签都指定一个高度，例如：

html, body{
    height: 100%;
}
因此，您的容器也是垂直居中的。

谢谢！成功了。我可以假定
的默认高度为100%吗？ 
html, body{
    height: 100%;
}