使用 place-content: center 的全宽 CSS 网格项
P粉245003607
2023-09-05 17:54:47
<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;"><div class="outer">
<div class="inner">Some content here</div>
</div></pre>
</p>
<p>我希望内部 div 为全宽,最大宽度为 500px,但它似乎没有像我期望的那样尊重 <code>width: 100%</code> 属性。</p>
<p>有人可以解释为什么会发生这种情况以及如何解决它,如果可能的话保持网格实现(我知道有其他方法可以将这样的事情居中,但出于好奇,我想尝试让这种方法发挥作用比什么都重要!)</p>
您可以使用 flex 代替 grid,这样您就可以非常轻松地做到这一点。
您可以在网格项上使用
place-self
,而不是使用place-content
。