CSS动态max-width实现：记忆游戏卡片组居中问题求助

嘿，这个问题我刚好碰到过，纯CSS完全能搞定，根本不用写一堆媒体查询硬算宽度！核心思路是放弃inline-block，改用Flexbox或者CSS Grid——这两个布局天生支持动态换行和自适应容器宽度，完美匹配你要的「max-width随每行卡片数自动变化+居中」需求。

为什么原来的inline-block方案有问题？ #

你用inline-block时，.card-deck作为块级元素默认宽度是100%，哪怕卡片换行了，容器还是撑满窗口，导致卡片只能左对齐，没法实现「卡片组整体居中」的效果。而且inline-block的margin还会因为行内空白字符出现额外间距，布局精度很难控制。

方案1：CSS Grid（最简洁直观） #

Grid布局的auto-fit+minmax组合可以自动根据容器宽度调整每行卡片数量，同时让.card-deck的宽度自适应内容，再配合margin: 0 auto实现整体居中：

/* 卡片容器 */
.card-deck {
  display: grid;
  /* 自动适配每行卡片数量，最小卡片宽度192px，确保不会被压缩 */
  grid-template-columns: repeat(auto-fit, minmax(192px, 1fr));
  gap: 3px; /* 代替卡片的margin，左右各1.5px的总间距是3px，避免inline-block的空白问题 */
  max-width: 1560px; /* 全屏时8张卡片的总宽度：8*(192 + 1.5*2) = 8*195 = 1560px */
  margin: 0 auto; /* 整个卡片组在页面水平居中 */
  padding: 0 1.5px; /* 避免边缘卡片的间距和页面边缘重叠，保证左右视觉一致 */
}

/* 单张卡片 */
.card {
  width: 192px;
  height: 192px;
  /* 不需要再设置margin了，gap已经处理了间距 */
}

这个方案的效果：

• 窗口宽度足够时，自动显示8张卡片，.card-deck宽度被max-width限制在1560px并居中；
• 窗口缩小到每行能放6张时，.card-deck自动收缩到1170px（6*195）并保持居中；
• 继续缩小窗口，卡片会自动换行，容器宽度始终匹配当前行的卡片总宽度，全程居中。

方案2：Flexbox（兼容性更好） #

如果你需要兼容更老的浏览器，Flexbox方案也能实现同样的效果：

/* 卡片容器 */
.card-deck {
  display: flex;
  flex-wrap: wrap; /* 空间不足时自动换行 */
  justify-content: center; /* 每行卡片在容器内居中 */
  gap: 3px;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 1.5px;
}

/* 单张卡片 */
.card {
  width: 192px;
  height: 192px;
}

和Grid方案的区别是：Flexbox容器默认是块级元素，宽度会取max-width和窗口宽度的最小值。当窗口宽度小于1560px时，容器宽度等于窗口宽度，但justify-content: center会让每行卡片在容器内居中，视觉效果和你要的完全一致。

如果你希望容器严格收缩到当前行卡片的总宽度（而不是占满窗口），可以把display: flex改成display: inline-flex，然后给父容器（比如body）加text-align: center：

.card-deck {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 1.5px;
}

body {
  text-align: center;
}

关键优势 #

这两个方案都不需要手动计算不同窗口宽度下的max-width，完全由CSS自动处理，既简洁又易维护。用gap代替margin还能避免inline-block的空白间距问题，布局精度更高。

内容的提问来源于stack exchange，提问作者EdKorket