justify-content: center 在 flex-direction: column 下仅控制垂直居中，水平居中需改用 align-items: center；理解主轴与交叉轴是解决此类问题的关键。
`justify-content: center` 在 `flex-direction: column` 下仅控制垂直居中，水平居中需改用 `align-items: center`；理解主轴与交叉轴是解决此类问题的关键。
在使用 Flexbox 布局时，一个常见误区是误以为 justify-content: center 总能实现“居中”——实际上，它的作用方向完全取决于容器的 主轴（main axis）。当 .experience 设置为 flex-direction: column 时，主轴变为纵向（从上到下），此时 justify-content: center 仅将子元素沿垂直方向居中对齐；而水平方向属于交叉轴（cross axis），必须使用 align-items: center 才能实现 <h2> 和 #experience_content 的水平居中。
以下是修正后的完整代码示例：
<!DOCTYPE html>
<html>
<head>
<style>
.experience {
display: flex;
flex-direction: column;
align-items: center; /* ✅ 水平居中（作用于交叉轴） */
justify-content: center; /* ⚠️ 可选：若需整体内容在父容器内垂直居中，需确保 .experience 有明确高度 */
min-height: 100vh; /* 示例：使 section 占满视口高度，让 justify-content 生效 */
margin: 0;
padding: 20px;
}
#experience_content {
display: flex;
gap: 10px;
flex-wrap: wrap; /* 可选：提升响应性 */
justify-content: center; /* ✅ 对内部 img + p 水平居中（此时其主轴为水平） */
align-items: center; /* ✅ 垂直对齐图文（如需基线/中线对齐） */
}
#experience_content img,
#experience_content p {
margin: 0; /* 移除默认外边距干扰 */
}
</style>
</head>
<body>
<section class="experience">
<h2>Work Experience</h2>
<div id="experience_content">
<img src="./images/supermarket.jpg" width="260" height="195" alt="Shopping center">
<p>Please help me solve this stupid problem. I beg you.</p>
</div>
</section>
</body>
</html>⚠️ 关键注意事项：
- justify-content 始终作用于主轴，align-items 始终作用于交叉轴——这是 Flexbox 对齐逻辑的基石；
- 若 .experience 无固定或最小高度（如 min-height: 100vh），justify-content: center 在垂直方向可能无明显效果，因其依赖容器可用空间；
- #experience_content 内部若需进一步控制 <img> 和 <p> 的对齐，建议为其单独设置 display: flex 并合理配置 justify-content 与 align-items；
- 避免滥用 !important 或嵌套多层 flex 容器，优先通过语义化结构和单一职责原则组织样式。
掌握主轴/交叉轴的对应关系，就能精准控制任意方向的对齐行为——这不仅是解决本例问题的核心，更是高效驾驭 Flexbox 的底层能力。
