使用 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>