Html 垂直定心问题

我想使用一个

相对div

来填充

内联块

——元素彼此对齐，所有元素都具有相同的宽度和高度（=正方形）

因此，如果存在

n

元素，则

相对div

应该可以在x方向上滚动。从下面的示例代码中可以看出，这是可行的：

.outer{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.家长{
位置：相对位置；
宽度：90%；
身高：40%；
溢出y：隐藏；
溢出-x：滚动；
文本对齐：居中；
空白：nowrap；
背景：红色；
}
.项目{
背景：黄色；
显示：内联块；
宽度：4%；
利润率：0%3%；
}
.项目：：之后{
内容：“；
显示：块；
垫底：100%；
}

我建议使用。
看

以下：

。。。定义浏览器如何沿flex项容器的横轴在flex项之间及其周围分布空间

.outer{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.家长{
位置：相对位置；
宽度：90%；
身高：40%；
溢出：隐藏；
溢出-x：滚动；
背景：红色；
显示器：flex；
对齐项目：居中；
}
.项目{
背景：黄色；
弹性：04%；
利润率：0.3%；
}
.项目：：之后{
内容：“；
显示：块；
垫底：100%；
}

我建议使用。
看

以下：

。。。定义浏览器如何沿flex项容器的横轴在flex项之间及其周围分布空间

.outer{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.家长{
位置：相对位置；
宽度：90%；
身高：40%；
溢出：隐藏；
溢出-x：滚动；
背景：红色；
显示器：flex；
对齐项目：居中；
}
.项目{
背景：黄色；
弹性：04%；
利润率：0.3%；
}
.项目：：之后{
内容：“；
显示：块；
垫底：100%；
}

---

只要给.parent元素这个代码，它就可以工作了： （您可以保留已编写的代码）

---

只需将此代码赋给.parent元素，它就可以工作了： （您可以保留已编写的代码）

---

没有使用css flex

.outer{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.家长{
位置：相对位置；
宽度：90%；
身高：40%；
溢出y：隐藏；
溢出-x：滚动；
文本对齐：居中；
空白：nowrap；
背景：红色；
}
.项目{
背景：黄色；
显示：内联块；
宽度：4%；
利润率：0%3%；
最高：50%；
转换：翻译（-50%，-50%）；
位置：相对位置；
}
.项目：：之后{
内容：“；
显示：块；
垫底：100%；
}

---

无需使用css flex

.outer{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.家长{
位置：相对位置；
宽度：90%；
身高：40%；
溢出y：隐藏；
溢出-x：滚动；
文本对齐：居中；
空白：nowrap；
背景：红色；
}
.项目{
背景：黄色；
显示：内联块；
宽度：4%；
利润率：0%3%；
最高：50%；
转换：翻译（-50%，-50%）；
位置：相对位置；
}
.项目：：之后{
内容：“；
显示：块；
垫底：100%；
}

但您没有更改层次结构，唯一更改的是显示属性。您弄错了。显示属性更改为flex。这个位置保持相对稳定。谢谢-我又看了一眼医生&他们告诉我-你的权利！没问题，可能会出现歧义：）。如果他和我的anwsers为您工作，请勾选：）但您没有更改层次结构，唯一更改的是display属性。您弄错了。显示属性更改为flex。这个位置保持相对稳定。谢谢-我又看了一眼医生&他们告诉我-你的权利！没问题，可能会出现歧义：）。如果他和我的同事为您工作，请勾选：）进一步参考，请参阅。@Temani Afif。来真的您使用答案作为此问题的正确答案标记了弹性框？查看了“保持父元素相对和外部元素绝对等…”。所以

relative！=flex

@Asker我将flexbox解决方案添加为第二个dup；）如果你想的话，我可以再加上更多。。。flexbox是未来读者可以考虑的替代方案。现在您有了所有与定心相关的副本，我限制为5个，但我仍然可以添加更多副本。Flex不影响相对/绝对位置值。有关进一步的参考，请参阅。@Temani Afif。来真的您使用答案作为此问题的正确答案标记了弹性框？查看了“保持父元素相对和外部元素绝对等…”。所以

relative！=flex

@Asker我将flexbox解决方案添加为第二个dup；）如果你想的话，我可以再加上更多。。。flexbox是未来读者可以考虑的替代方案。现在您有了所有与居中相关的副本，我限制为5个，但我仍然可以添加更多。Flex不影响相对/绝对位置值。我没有更改层次结构。确定。我看到你的右边。谢谢你的解决方案。但还是有个问题。请看一下，如果只有几个（比如2x）项目，会发生什么情况。也应该使中心水平。但它们不是——因为其中一个项目在左边——另一个项目在红色区域的右边。那么，您是否愿意编辑您的解决方案？你好，Tom编辑：使用

justify content:center将把最左边的项移出可缩放div边界！我将
justify content
从
space-between
更改为
center
。然而，最后一个孩子的右边距似乎被截断了，我说
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
 }