使用 place-content: center 的全寬 CSS 網格項

Question

我使用 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;
}

<div class="outer">
<div class="inner">Some content here</div>
</div>

我希望內部 div 為全寬，最大寬度為 500px，但它似乎沒有像我期望的那樣尊重 width: 100% 屬性。

有人可以解釋為什麼會發生這種情況以及如何解決它，如果可能的話保持網格實現（我知道有其他方法可以將這樣的事情居中，但出於好奇，我想嘗試讓這種方法發揮作用比什麼都重要！）

Answer 1

您可以使用 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%;
}

<div class="outer">
  <div class="inner">Some content here</div>
</div>

Answer 2

您可以在網格項目上使用 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;
}

<div class="outer">
  <div class="inner">Some content here</div>
</div>