此问题已在此处有答案：
How can I vertically center a div element for all browsers using CSS?（49答案）
Why does styling the background of the body element affect the entire screen?（7个回答）
Make body have 100% of the browser height（25个回答）
Flexbox: center horizontally and vertically（14个回答）
8天前关闭
此帖子于8天前编辑并提交审核，未能重新打开帖子：
原始关闭原因未解决
我正在做一个CSS挑战，我遇到了一个问题。我设置显示：flex;在主体上，虽然justify-content工作正常，但justify-items的行为并不符合预期。我甚至改变了身体的背景颜色，看看问题是否与高度有关，但这不是问题所在。整个页面采用了新的颜色。
你对我为什么会遇到这个问题有什么看法吗？我看到一些关于同样问题的帖子。但是没有人给出正确的答案或解释为什么会发生这种情况！
我将感谢你的帮助和建议。请保持对话的尊重，因为我相信寻求帮助而不是批评。验证码：
body{
background-color:rebeccapurple;
display:flex;
align-items:flex-end;
justify-content:center;
}
div {
width: 100px;
height: 100px;
background: #9CCCDB;
}<div></div>
2条答案
按热度按时间elcex8rz1#
这是一个奇怪的问题，所以完全可以理解为什么它会令人困惑。
<body>的背景色确实占据了整个页面，但是如果你用开发工具检查它，你会发现它只有100px高（也就是说，和那个蓝色的块一样高）。为什么？如果你好奇的话，这里有答案：Why does styling the background of the body element affect the entire screen?。所以问题实际上是高度。要修复它，您可以将
<body>的高度设置为整个视口的高度。ncecgwcz2#
你的意思是你希望小盒子在视口的底部？
它看起来像有一个有点不直观的效果发生的结果，背景颜色。It 正在填充viewport，但是如果您使用浏览器的调试工具检查DOM和样式，您会看到
<body>元素只有100px的内部高度（因为它包含的元素）。您可以将
<body>定义为始终是视口的全高：作为潜在的额外增强...在我的浏览器中，
<body>有一个默认的8px边距作为用户代理样式的一部分，如果你愿意，你可以从视口高度中减去它：或者你可以显式地控制边距等。