使用CSS无法将调整尺寸后的大图片居中该如何解决

align-items、justify-content属于flex容器的专属属性，直接作用于img元素不会生效。你当前没有给img的父容器.img-container设置任何布局规则，该容器默认是块级元素，宽度与父级.music-container保持一致，而你设置了max-width: 30%的img属于行内替换元素，默认表现为左对齐，因此出现你遇到的问题。

你完全不需要上传更小尺寸的图片即可解决问题，可选方案如下：

• 方案1：为.img-container设置flex布局实现居中

.img-container {
  display: flex;
  justify-content: center;
  /* 可根据需要自行添加上下内边距调整间距 */
  padding: 24px 0;
}

• 方案2：为img元素添加自动左右边距实现居中

img {
  max-width: 30%;
  height: auto;
  display: block;
  margin: 0 auto;
}

• 方案3：为.img-container设置文本居中属性

.img-container {
  text-align: center;
}

以上三种方案任选其一添加到你的CSS代码中即可实现图片居中效果。

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