Flex布局中为何justify-content:center设置未生效？

核心问题 #

justify-content 是Flex容器专属属性，仅对设置了 display: flex/inline-flex 的元素生效。你给 .single-section 添加该属性，但它并没有被定义为Flex容器，所以样式完全不会起作用。

具体修正方案 #

要让 .single-section 内部的内容（图片、标题）水平居中，需要先把 .single-section 转为Flex容器，再配置对齐属性：

.top-container{
  display: flex;
  flex-flow: row nowrap;
  margin: 20px 60px;
  height: auto;
}
.single-section{
  flex-grow: 1;
  width:20%;
  /* 添加以下Flex容器配置 */
  display: flex;
  flex-direction: column; /* 子元素垂直排列，保持原有布局结构 */
  align-items: center; /* 子元素水平方向居中，实现你需要的效果 */
}
.img-h{
  width: 35%;
}
.img-top-container{
  width: 100%;
}
.single-section > h3{
  font-size: 12px;
  font-weight: 400;
}

补充说明 #

• 如果你只需要图片水平居中，也可以给 .img-top-container 加 text-align: center（因为图片属于行内块元素），但Flex布局的方式更通用，适配后续扩展其他内容的对齐需求。
• 注意Flex主轴方向的影响：当 flex-direction: row（默认）时，justify-content 控制水平对齐；当 flex-direction: column 时，justify-content 控制垂直对齐，align-items 才是水平对齐属性。

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