我使用 CSS 網格的 place-content: center 將 div 在固定容器中垂直和水平居中，如下所示：
.outer { position: fixed; inset: 0; background: black; display: grid; place-content: center; } .inner { padding: 30px; background: white; width: 100%; max-width: 500px; } Some content here
我希望內部 div 為全寬，最大寬度為 500px，但它似乎沒有像我期望的那樣尊重 width: 100% 屬性。
有人可以解釋為什麼會發生這種情況以及如何解決它，如果可能的話保持網格實現（我知道有其他方法可以將這樣的事情居中，但出於好奇，我想嘗試讓這種方法發揮作用比什麼都重要！）
您可以使用 flex 代替 grid，這樣您就可以非常輕鬆地做到這一點。
.outer { position: fixed; width: 100%; height: 100%; background: black; display: flex; justify-content: center; align-items: center; } .inner { padding: 30px; background: white; width: 100%; }您可以在網格項目上使用
place-self，而不是使用place-content。.outer { position: fixed; inset: 0; background: black; display: grid; } .inner { padding: 30px; background: white; width: 100%; max-width: 500px; place-self: center; }