Question

在此示例中，只要浏览器窗口高度低于400px，图像就不再位于可滚动区域的中心。

 html {
   height: 100%;
 }
 
 body {
   height: 100%;
   display: flex;
   align-items: center;
   margin: 0;
   padding: 0;
 }
 
 #content {
   height: 400px;
   display: flex;
   align-items: center;
 }

<div id="content">
  <img src="http://placehold.it/300x300">
</div>

一旦我取消设置html或正文或两者的高度属性，它就会起作用。

尽管如此，我想了解为什么在这个具体示例中居中失败。它与嵌套的flexbox有关吗？或者将html和body的高度设置为100％会有问题吗？它是一个bug还是浏览器相关的东西？

Answer 1

与margin: 0 auto（与position: relative一起）类似于水平居中：只要容器比居中的孩子宽，孩子就会居中。但是，只要容器（或主体/视口）比子容器窄，子容器就会向左对齐，并且会出现滚动条。这样，总是可以看到整个子元素 - 因为它比容器大，只有在启用滚动时才有可能。

在你描述的情况下，flexbox和垂直居中会发生同样的情况：如果父容器比子容器小（即低），并且子容器在没有滚动条的情况下居中，你就不会这样做能够看到它的顶部和底部（这可能很重要，例如，如果它是你必须填写文本字段等的形式），你将无法滚动看到那些隐藏的部分。因此，在这种情况下（子项高于父项，子项垂直居中于flex容器中），子项将放在父项的顶部，您可以向下滚动，这样可以阅读/查看整个内容或如果是表格，请查看/填写整个表格。

在嵌套的flexbox中，居中失败

1 个答案: