justify-content: center 在 flex-direction: column 下仅控制垂直居中，水平居中需改用 align-items: center；理解主轴与交叉轴是解决 Flexbox 对齐问题的关键。

`justify-content: center` 在 `flex-direction: column` 下仅控制垂直居中，水平居中需改用 `align-items: center`；理解主轴与交叉轴是解决 flexbox 对齐问题的关键。

在 Flexbox 布局中，对齐行为完全取决于主轴（main axis）和交叉轴（cross axis）的方向，而这两者由 flex-direction 决定。当你设置 .experience { display: flex; flex-direction: column; justify-content: center; } 时，主轴变为垂直方向（从上到下），因此 justify-content: center 会将子元素沿垂直方向居中——这正是你看到

和 #experience_content 在容器内上下居中的原因；但它不会影响水平位置，所有子元素仍默认左对齐。

要实现水平居中，必须作用于交叉轴，即使用 align-items: center（适用于整个 flex 容器的子元素）。该声明会让所有直接子元素（如

和

）在其交叉轴（此处为水平方向）上居中：

.experience {
  display: flex;
  flex-direction: column;
  align-items: center; /* ✅ 水平居中关键声明 */
  /* justify-content: center; ← 可选：若还需垂直居中才保留 */
}

同时注意：#experience_content 本身无需 display: flex 即可受益于外层 .experience 的 align-items（因其是直接子元素）；若你后续希望其内部的 和

也水平居中，可额外为其启用 flex 并设置 justify-content: center（此时它的主轴是水平的）：

#experience_content {
  display: flex;
  gap: 10px;
  justify-content: center; /* 子项（img + p）水平居中 */
}

⚠️ 注意事项：

• align-items 作用于容器的所有直接子元素，不继承；
• 若子元素设置了 align-self，则会覆盖容器的 align-items；
• 避免滥用嵌套 flex 容器——先明确“谁是布局容器、谁是内容项”，再选择 justify-content（主轴）或 align-items（交叉轴）；
• 垂直+水平完全居中组合：display: flex; justify-content: center; align-items: center;（此时 flex-direction: row 是默认值，主轴水平、交叉轴垂直）。

掌握主轴/交叉轴的映射关系，比死记属性更可靠——它让你在任何 flex-direction（row/row-reverse/column/column-reverse）下都能精准控制对齐效果。