使用 placecontent： center 的全宽 CSS 网格项目

发布于05月24日

我正在使用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%属性.

谁能解释一下为什么会发生这种情况，以及如何解决它，如果可能的话，保留网格实现(我知道除了以这种方式居中之外，还有其他 Select ，但我更愿意try 让这种方法工作，这是出于好奇心，而不是其他任何事情！)

Css相关问答推荐

如何获得特定位置的Divs以根据浏览器宽度正确调整大小

R SHINY：FILL CONTAINER=TRUE时调整DT数据表高度，

具有不同边框宽度和 colored颜色的边框半径，Safari渲染问题

Prettier/VS Code 在 CSS 中的！important 之前添加一个空格，导致它在 WordPress 中崩溃

同时实现渐变文本和闪光文本效果是否可行？

CSS 字符串变量的正确null值是多少？

flex 容器中的两个滚动块

Flexbox 子高度它的内容

我怎样才能让这个边框出现在按钮元素的上方？

有条件地覆盖 CSS 中的 AntD Select 样式

CSS中的旋转地球

使用 CSS 在悬停时转换 SVG 路径的填充属性

css3 nth 类型限制为类

CSS设置宽度以填充剩余区域的百分比

如何在浏览器的右下角放置一个div？

如果容器 div 较小，如何将子 div 扩展到 100% 屏幕宽度？

如何防止内联块 div 换行？

如何参加滚动事件？

如何实现最大字体大小？

可见性：隐藏 vs 显示：无 vs 不透明度：0

实用课程推荐

推荐答案

Css相关问答推荐