为何CSS中body的align-items属性无法实现.card元素的垂直居中？

嘿，我明白你遇到的问题了！这其实是flex布局里一个很常见的小坑——你的flex容器（也就是body）没有足够的垂直空间。

问题原因 #

默认情况下，body的高度是由它里面的内容（也就是你的.card盒子）决定的，它只会包裹内容，高度和.card一样是400px。当你给body设置display: flex和align-items: center时，因为容器本身垂直方向没有多余空间，所以看起来完全没变化。

解决方案 #

只需要给body添加一个min-height: 100vh的样式，让它的高度至少占满整个浏览器视口的高度：

修改后的CSS代码：

*{ 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: "Poppins", sans-serif; 
} 
body{ 
  display: flex; 
  justify-content: center; 
  align-items: center; /* 现在这个属性会生效了 */
  min-height: 100vh; /* 关键：让body占满视口高度 */
  background-color: aquamarine; 
} 
.card{ 
  width: 350px; 
  height: 400px; 
  background-color: red; 
} 
.card .imgBox{ 
  width: 40px; 
  height: 40px; 
  background-color: blue; 
}

补充说明 #

100vh是CSS的视口单位，代表“视口高度的100%”。设置min-height:100vh后，不管你的屏幕尺寸多大，body都会至少撑满整个屏幕的垂直空间，这样flex布局的align-items: center就能在垂直方向上把.card盒子居中了。

内容的提问来源于stack exchange，提问作者Meriç Bulca