CSS网格：将网格中的所有内容居中

我下面的代码片段可以按照我的意愿工作，但当有更多可用空间时，我无法将所有

菜单项居中

在较小的屏幕上，结果符合要求：


在大屏幕上，我可以看到：


我想要的是：


这是我的密码


正文{
背景色：#f5ce42；
}
img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.菜单项{
最大宽度：300px；
}
.menu\u内部-柔性{
框大小：边框框；
填充：20px；
宽度：100vw；
显示：网格；
网格模板列：重复（自动填充，最小值（180px，最大内容））；
网格自动行：1fr；
间隙：20px；
}
这两个元素将容器设置在中心，宽度为75%


正文{
背景色：#f5ce42；
}
img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.菜单项{
最大宽度：300px；
}
.menu\u内部-柔性{
/*我的回答*/
保证金：自动；
宽度：75%；
框大小：边框框；
填充：20px；
/*删除宽度：100vw*/
显示：网格；
网格模板列：重复（自动填充，最小值（180px，最大内容））；
网格自动行：1fr；
间隙：20px；
}
问题是，您已将网格宽度定义为100vw，这将使网格具有100%的视口宽度，因此网格从屏幕的左端开始。对于较小的屏幕，它会提供所需的结果，但对于较大的视口，所有栅格项目都放置在同一行中

我建议您将宽度的大小减小到60vw-80vw左右，并在网格中添加
margin:0auto
，如下所示：


正文{
背景色：#f5ce42；
}
img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.菜单项{
最大宽度：300px；
}
.menu\u内部-柔性{
框大小：边框框；
填充：20px；
宽度：70vw；
保证金：0自动；
显示：网格；
网格模板列：重复（自动填充，最小值（180px，最大内容））；
网格自动行：1fr；
间隙：20px；
}

我同意这两个答案，但我也会在800px下为更小的屏幕编写一个媒体查询，将
的宽度设置为内部-flex
备份到
100vw
，这样你就可以得到想要的效果，即网格首先占据整个屏幕。
你应该使用auto-fit和证明内容：

可能的更新：

  grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
  justify-content:center;

下面的现场演示，其中项目设置为最大宽度180px，以显示正在进行的定心


正文{
背景色：#f5ce42；
保证金：0；
}
img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.菜单项{
最大宽度：180px；/*为演示目的而转向道氏，300px也可以，但需要大屏幕*/
}
.menu\u内部-柔性{
框大小：边框框；
填充：20px；
显示：网格；
网格模板列：重复（自动拟合，最小值（180px，最大内容））；
网格自动行：1fr；
/*宽度：100vw；这种方法看起来像是解决方案，但是当单个图像具有不同的纵横比时，使用
自动调整
会创建不均匀的列宽。我将尝试通过在图像上保持纵横比来解决此问题。我可以使用您建议的解决方案，但会出现两个问题。每当我有肖像图像时，它都会显示出来全高。使用纵横比填充top hack保持纵横比会破坏网格的响应性，所有图像始终为180px。第二个问题是，如果元素没有图像，它会被截断为最小宽度。调侃：@browsergarden这是一个可能的结果吗：（300px调低到180px以查看居中情况）另一种是文字/图片混合在一起：我的预期行为是保持陆地空间纵横比，因此裁剪肖像图像。但它破坏了“菜单项”的响应能力，如您在此处所见：