如何让自动缩放的图片在div容器中实现水平垂直居中？

最优CSS方案：使用Flexbox #

给.vertical-card添加Flex布局属性，就能让内部图片同时实现水平和垂直居中，且不影响图片的自动缩放特性：

.vertical-card {
  width: 400px;
  height: 300px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: inline-block;
  text-decoration: none;
  border-color: #5B9BD5;
  border-width: 15px;
  border-style: solid;
  background-color: white;
  /* 新增以下3行 */
  display: flex;
  justify-content: center;
  align-items: center;
}

原图片样式无需修改，margin: auto可保留（Flex布局下非必需）：

.vertical-card-community-icon-image {
  display: block;
  max-width: 90%;
  max-height: 80%;
  width: auto;
  height: auto;
  margin: auto;
}

替代CSS方案：使用Grid布局 #

如果偏好Grid语法，可用更简洁的写法：

.vertical-card {
  /* 其他原有样式不变 */
  display: grid;
  place-items: center;
}

为什么之前的方案无效？ #

你之前尝试的margin: auto仅能实现水平居中，因为父元素.vertical-card默认是inline-block布局，这种布局下垂直方向的margin: auto无法生效。Flex/Grid布局会让容器内部元素在两个轴向上都能被居中对齐，完美适配需求。

备用JavaScript方案（仅当CSS方案无法使用时） #

若因兼容限制无法使用现代CSS布局，可通过JS动态计算位置：

// 获取所有vertical-card元素
const cards = document.querySelectorAll('.vertical-card');

cards.forEach(card => {
  const img = card.querySelector('.vertical-card-community-icon-image');
  // 计算垂直居中的margin-top
  const marginTop = (card.offsetHeight - img.offsetHeight) / 2;
  // 计算水平居中的margin-left
  const marginLeft = (card.offsetWidth - img.offsetWidth) / 2;
  // 设置样式
  img.style.marginTop = `${marginTop}px`;
  img.style.marginLeft = `${marginLeft}px`;
});

注意：需确保图片加载完成后再执行代码，可将其放在window.onload事件中。

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