Html 当我缩小视口宽度时，为什么调整内容中心失败？

在足够宽的视口中，“flex容器”元素“George Zuberi”的内容保持水平居中，这得益于

justify content:center。但是，当您将视口缩小很多时，它将失败。它需要
文本对齐：居中以保持水平居中。为什么会这样


.grid容器{
显示：网格；
高度：100px；
网格模板柱：1fr 1fr 1fr；
背景色：#ECF0DE；
}
.柔性容器{
/*文本对齐：居中*/
颜色：#BD6EB6；
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
}

乔治·祖贝里
我不知道我是否正确，因为我从来没有使用网格，所以我可能是错的，但从我所看到的是，通过使用1fr 1fr 1fr在网格中创建3行，这意味着给每行33%的空间。在你33%的房间里，你说把我的文字居中。所以，当你缩小屏幕尺寸时，你的33%会被裁剪，并自动向左移动，但因为你说它必须在33%的空间中居中，当它缩小到居中时，它会随着空间移动，这有意义吗？
我不知道我是否正确，因为我从不使用网格，所以我可能是错的，但从我看到的情况来看，您可以使用1fr 1fr 1fr wich在网格中创建3行，这意味着为每行提供33%的空间。在你33%的房间里，你说把我的文字居中。因此，当你缩小屏幕尺寸时，你的33%会被裁剪，并自动向左移动，但因为你说它必须在33%的空间中居中，当它缩小到居中时，它会随着空间移动，这有意义吗？
如果你用任何html元素包装flex容器的内容，例如，
span
，那么您将很容易理解这里发生了什么

flex容器的内容实际上在flex容器中居中，但当屏幕足够小，文本
George Zuberi
无法放在一行中时，它会包装，此时flex容器的内容似乎没有居中

正如您在下面的示例中所看到的，
justify content:center
应用于
span
元素（黄色），这就是为什么它在flex容器中居中（红色），但
span
元素中的文本不居中

如果希望
span
元素内的文本也居中，则在
span
元素上添加
text align:center

您可以使用
justify content
在flex容器中居中放置任何内容，并且您的文本确实在
flex容器中居中放置。为flex容器添加背景色，以便更好地理解事物

作为提示，不要直接在
flex容器中编写文本，而是将文本包装在任何html元素中


.grid容器{
显示：网格；
高度：100px；
网格模板柱：1fr 1fr 1fr；
背景色：#ECF0DE；
}
.柔性容器{
背景：红色；
颜色：#BD6EB6；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
跨度{
宽度：80%；
背景：黄色；
}

乔治·祖贝里
如果您使用任何html元素（例如，
span
）包装flex容器的内容，那么您将很容易理解这里发生了什么

flex容器的内容实际上在flex容器中居中，但当屏幕足够小，文本
George Zuberi
无法放在一行中时，它会包装，此时flex容器的内容似乎没有居中

正如您在下面的示例中所看到的，
justify content:center
应用于
span
元素（黄色），这就是为什么它在flex容器中居中（红色），但
span
元素中的文本不居中

如果希望
span
元素内的文本也居中，则在
span
元素上添加
text align:center

您可以使用
justify content
在flex容器中居中放置任何内容，并且您的文本确实在
flex容器中居中放置。为flex容器添加背景色，以便更好地理解事物

作为提示，不要直接在
flex容器中编写文本，而是将文本包装在任何html元素中


.grid容器{
显示：网格；
高度：100px；
网格模板柱：1fr 1fr 1fr；
背景色：#ECF0DE；
}
.柔性容器{
背景：红色；
颜色：#BD6EB6；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
跨度{
宽度：80%；
背景：黄色；
}

乔治·祖贝里
原因在于
.grid container
：您必须将其限制为一列（这将填充父容器，也将导致flex container为全宽，其中的居中也将按预期工作：

加注后，Flex容器的内容按需要集中在Flex容器中。文本不出现在页面的中间或外部容器的原因是外部容器由三个网格列组成，在这个例子中它们不可见。

.grid容器{
显示：网格；
高度：100px；
网格模板列：1fr；
背景色：#ECF0DE；
}
.柔性容器{
/*文本对齐：居中*/
颜色：#BD6EB6；
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
}

乔治·祖贝里
原因在于
.grid container
：您必须将其限制为一列（这将填充父级，也将导致