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

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

在 Flexbox 布局中，justify-content 和 align-items 的行为高度依赖于容器的 flex-direction 设置。当 .experience 设置为 flex-direction: column 时，主轴（main axis）变为垂直方向，因此 justify-content: center 会将子元素沿纵轴居中排列（即上下居中），而不会影响它们的水平位置——这正是问题中

和 #experience_content 未水平居中的根本原因。

要实现真正的水平居中（即让标题和内容块在容器内左右居中），应使用 align-items: center：该属性作用于交叉轴（cross axis），在 column 方向下，交叉轴即为水平方向，因此能有效使所有直接子元素（包括

和

）水平居中。

✅ 正确写法如下：

.experience {
  display: flex;
  flex-direction: column;
  align-items: center; /* ✅ 水平居中（交叉轴） */
  justify-content: center; /* ⚠️ 可选：若需整体内容在父容器中垂直居中，保留；否则可移除 */
  min-height: 100vh; /* ? 建议添加，确保垂直居中效果可见（尤其当内容较少时） */
}

同时注意：#experience_content 本身无需设 display: flex 即可继承父级居中效果；若后续需对其内部的 和

做横向并排+居中，可单独启用其 flex 布局并设置 justify-content: center（此时其主轴为水平方向）：

#experience_content {
  display: flex;
  flex-direction: row; /* 默认值，可省略 */
  justify-content: center; /* 水平居中其子项 */
  gap: 10px;
}

⚠️ 关键提醒：

• 不要混淆 justify-content（主轴）与 align-items（交叉轴）；
• align-items 作用于直接子元素，不影响后代嵌套元素；
• 若容器高度不足，justify-content: center 的垂直居中可能不可见——建议为 .experience 设置明确高度（如 min-height: 100vh）以验证效果；
• 调试时可用浏览器开发者工具实时切换 flex-direction，观察主/交叉轴变化，加深理解。

掌握主轴与交叉轴的对应关系，是写出健壮、可维护 Flexbox 布局的基础。