當我縮小視口寬度時，為什么 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% 的空間中居中，所以當它減小以保持居中時，它會隨着空間移動中間，這有意義嗎？