使用 place-content: center 的全宽 CSS 网格项
P粉245003607
P粉245003607 2023-09-05 17:54:47
0
2
471
<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>
P粉245003607
P粉245003607

全部回复(2)
P粉478188786

您可以使用 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>
P粉020085599

您可以在网格项上使用 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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板