Flex布局下如何让居中列div内的不同宽度图片实现居中对齐？

嘿，我一眼就揪出问题所在啦——你用的justify-items:center是Grid布局专属属性，在Flex容器里完全不会生效，这就是图片一直左对齐的核心原因！

先给你修正两个关键细节：

1. 修复HTML的img标签错误 #

你的img标签写法有误，正确格式应该是：

<img src="URL HERE" alt="图片描述">

漏了src属性的话图片根本加载不出来，先把这个小问题补上~

2. 两种让图片居中的CSS方案 #

方案一：把centercol变成垂直Flex容器 #

既然父容器用了Flex，咱们可以把中间列也改成Flex布局，设置垂直排列后，用align-items:center控制水平居中（因为flex方向为column时，align-items管水平对齐，justify-content管垂直对齐）：

.parent { 
  display:flex; 
  justify-content:space-between; 
}
.centercol {
  display: flex;
  flex-direction: column;
  align-items: center; /* 让子元素（图片）水平居中 */
}

方案二：利用文本对齐属性 #

因为img属于行内块元素，直接给centercol设置text-align:center就能让图片水平居中，这个方法更简洁：

.parent { 
  display:flex; 
  justify-content:space-between; 
}
.centercol {
  text-align: center; /* 行内/行内块元素会跟随文本对齐规则 */
}

两种方案都能实现你想要的中间列图片居中效果，选哪个可以根据你后续的布局扩展需求来决定~

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