如何在div内居中img元素且避免图片被缩小？

云原生阿岚

2026-8-22

解决Flex容器内图片被缩小且居中不完整的问题

问题根源

你当前的.img-star容器设置了固定width:45px和height:45px，同时还有padding:20px——默认盒模型下，padding会额外占据空间，导致容器内部的内容区域实际只有45px - 20px*2 = 5px，图片自然被压缩到极小；另外你只设置了justify-content:center实现水平居中，垂直方向没有配置居中规则。

修复方案

以下两种方案都能实现图片正常尺寸+水平垂直居中：

方案1：调整容器尺寸并启用盒模型内边距包含

把padding算入容器宽高，同时补充垂直居中配置：

.img-star {
  border: 1px solid white;
  padding: 20px;
  margin: 30px;
  border-radius: 50%;
  width: 85px; /* 45px + 20px*2 padding */
  height: 85px;
  display: flex;
  justify-content: center;
  align-items: center; /* 补充垂直居中 */
  box-sizing: border-box; /* 让padding包含在宽高内，避免额外撑开容器 */
}

.img-star img {
  width: 3em;
  height: auto; /* 保持图片原始比例 */
}

方案2：让容器自适应图片尺寸

如果不需要固定容器大小，直接让容器根据图片尺寸自适应：

.img-star {
  border: 1px solid white;
  padding: 20px;
  margin: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
}

.img-star img {
  width: 3em;
  height: auto;
}