带标题的图片无法水平居中？求CSS布局解决方案

之前在Stack Overflow提过相关问题，但之前的回答只解决了代码排布问题，没解决水平居中的核心需求。我换掉了原问题里的CSS代码，改用了新样式，但无论是否设置max-width: 800px;，都达不到预期的居中效果。

当前使用的CSS代码 #

.img {
  margin: 10px;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  /* max-width: 800px; */
}

.grid a {
  display: flex;
  align-items: center;
}

相关JSX代码片段 #

<div className={styles.grid}>
  <div className={styles.imgc}>
    <a href="../pages/satweather.js">
      <img
        className={styles.img}
        src="weatherbutton.jpg"
        width="100"
        height="50"
        onclick="openModal();currentSlide(1)"> 
      </img>
      <div>&rarr; SatWeather</div>
    </a>
  </div>

  {/* 代码重复4次添加更多图片，最后闭合外层div */}

</div>

当前效果 #

移除或添加max-width: 800px;后效果一致：

• 缩略屏视图：
• 全屏视图：

预期需求 #

实现带标题的图片在页面中水平居中对齐，同时保留图片与文字间的间距，预期效果参考：

可行解决方案/尝试方向 #

• 给.grid容器加justify-content: center;，这是Flex布局实现子元素水平居中最直接的方法，修改后样式：

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 新增 */
  /* max-width: 800px; */
}

• 检查.imgc元素是否有额外的margin/padding，有的话重置为margin: 0; padding: 0;，避免干扰居中。
• 确保.grid的父元素没有设置限制宽度或溢出隐藏的属性，否则会影响居中范围。
• 如果想限制网格最大宽度，可重新启用max-width: 800px;并加margin: 0 auto;，先让容器自身居中，再让内部元素居中：

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto; /* 新增 */
}

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