Html 为什么这些盒子不能垂直对齐？ 我无法理解这一点，它是把盒子放在容器的中间，但我不能让它们移动。 “P”的想法是把包装物放在中间，并将它们水平放置在中间，而不必用页边或边框来模糊，并使用ValITCALL对齐。

#包装器{
宽度：1000px；
高度：1000px；
}
#容器{
宽度：900px；
高度：900px；
文本对齐：居中；
显示：内联块；
背景颜色：浅蓝色；
}
.盒子{
宽度：200px；
高度：200px；
保证金：0自动；
显示：内联块；
垂直对齐：中间对齐；
背景颜色：浅绿色；
边框：1px纯灰；
利润率：10px；
}

盒
盒
盒

我想你在找flexbox

我已将您的JSFIDLE进行了调整，以适合您的需要

下面的代码是我对您的#content元素所做的更改

display: flex;
justify-content: center;
align-items: center;
gap: 5px;

基本上，将元素设置为在中心水平（对齐项目）和垂直（对齐内容）显示。用5px的间隙隔开盒子

有关更多信息，请查看此处：

下面是JSFIDLE的集成形式

#容器{
宽度：100vw；
高度：100vh；
文本对齐：居中；
显示：内联块；
背景颜色：浅蓝色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
间隙：5px；
}
.盒子{
宽度：200px；
高度：200px；
保证金：0自动；
背景颜色：浅绿色；
边框：1px纯灰；
利润率：10px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
身体{
边际：0px；
}

盒
盒
盒

如果你想让它们垂直堆叠，为什么要使用

display:inline block

？我不想让它们垂直堆叠。你说的“将它们垂直放置在中间”是什么意思？废话，editread会理解这一点吗：它是有效的，但问题是看看我的代码中是否缺少使用垂直对齐的东西，就我个人而言，我不会使用垂直对齐，因为它在很多情况下都有断裂的倾向，并且对其他显示尺寸（固定与动态内容查看）不灵活@BiP00，的行为与您预期的略有不同。注意中间：“将元素的中间与基线加上父元素x高度的一半对齐。”而不是父元素的中间。@JonP thnak非常感谢，明白了。