当我缩小视口宽度时，为什么 justify-content: center 会失败？

Question

在足够宽的视口上，'flex-container' 元素的内容 - 'George Zuberi' - 由于justify-content: center; . 但是，当您将视口缩小很多时，它会失败。 它需要text-align: center; 仍然保持水平居中。 为什么是这样？

 .grid-container { display: grid; height: 100px; grid-template-columns: 1fr 1fr 1fr; background-color: #ECF0DE; }.flex-container { /* text-align: center; */ color: #BD6EB6; display: flex; flex-direction: row; justify-content: center; align-items: center; }

 <header class="grid-container"> <div class="flex-container"> George Zuberi </div> </header>

Answer 1

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

flex 容器的内容实际上在 flex 容器中居中，但是当屏幕足够小以至于George Zuberi无法在一行中显示文本时，它会自动换行，这时 flex 容器的内容似乎没有居中。

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

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

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

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

 .grid-container { display: grid; height: 100px; grid-template-columns: 1fr 1fr 1fr; background-color: #ECF0DE; }.flex-container { background: red; color: #BD6EB6; display: flex; justify-content: center; align-items: center; } span { width: 80%; background: yellow; }

 <header class="grid-container"> <div class="flex-container"> <span>George Zuberi</span> </div> </header>

Answer 2

原因在于.grid-container ：您必须将其限制为一列（然后将填充父级，这也将导致 flex-container 全宽，其中居中将再次按预期工作：

在一些评论之后添加： flex-container 的内容根据需要在 flex-container内部居中。 文本没有出现在页面中间或外部容器的原因是外部容器由三个网格列组成，在此示例中不明显可见。

 .grid-container { display: grid; height: 100px; grid-template-columns: 1fr; background-color: #ECF0DE; }.flex-container { /* text-align: center; */ color: #BD6EB6; display: flex; flex-direction: row; justify-content: center; align-items: center; }

 <header class="grid-container"> <div class="flex-container"> George Zuberi </div> </header>

Answer 3

我不知道我是否正确，因为我从不使用网格，所以我可能是错的，但据我所知，您使用 1fr 1fr 1fr 在网格中创建了 3 行，这意味着给每一行 33% 的空间。 在你 33% 的房间里，你说我的文字居中。 因此，当您减小屏幕尺寸时，您的 33% 会被弹出并自动向左移动，但是因为您说它必须在 33% 的空间中居中，所以当它减小以保持居中时，它会随着空间移动中间，这有意义吗？