<p>我使用 CSS 网格的 <code>place-content: center</code> 将 div 在固定容器中垂直和水平居中，如下所示：</p> <p> <pre class="brush:css;toolbar:false;">.outer { position: fixed; inset: 0; background: black; display: grid; place-content: center; } .inner { padding: 30px; background: white; width: 100%; max-width: 500px; }</pre> <pre class="brush:html;toolbar:false;">&lt;div class="outer"&gt; &lt;div class="inner"&gt;Some content here&lt;/div&gt; &lt;/div&gt;</pre> </p> <p>我希望内部 div 为全宽，最大宽度为 500px，但它似乎没有像我期望的那样尊重 <code>width: 100%</code> 属性。</p> <p>有人可以解释为什么会发生这种情况以及如何解决它，如果可能的话保持网格实现（我知道有其他方法可以将这样的事情居中，但出于好奇，我想尝试让这种方法发挥作用比什么都重要！）</p>

.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>

.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>