flex-direction: column 时 justify-content 控制垂直对齐（如 center 实现垂直居中），align-items 控制水平对齐（如 center 实现水平居中），二者需配合使用；父容器需有明确高度，子元素内文字对齐还需额外设置 text-align。
flex-direction: column 时 justify-content 控制垂直方向
当父容器设为 flex-direction: column，主轴就变成垂直方向，justify-content 的作用对象也随之变为上下对齐。此时 justify-content: center 是让子元素在容器高度内垂直居中，而不是水平居中。
常见错误现象：加了 flex-direction: column 后文字“突然跑到顶部”或“只垂直居中但水平左对齐”——往往是因为漏了 align-items: center（它此时控制的是水平方向）。
-
justify-content: center→ 垂直居中（主轴） -
align-items: center→ 水平居中（交叉轴） - 两者必须同时存在，缺一不可
- 若子元素是多个
<p></p>或<div>，它们会按列堆叠，<code>justify-content决定整体在容器中的纵向位置多行文字块在 column 布局中仍需 text-align
如果容器里只有一个块级子元素（比如一个
<div class="content">），里面包含自动换行的多行文字，<code>justify-content和align-items只能控制这个块的整体位置，不能控制其内部文字的对齐方式。这时候必须额外加
text-align: center到该子元素上，否则文字虽然居中了，但每行仍是左对齐。- 父容器：
display: flex; flex-direction: column; justify-content: center; align-items: center; - 子元素（文字容器）：
text-align: center; max-width: 80%; - 不设
max-width容易导致文字撑满全宽，text-align: center看不出效果 - 移动端尤其要注意：小屏下若未限制宽度，文字可能单字一行，破坏可读性
align-items: center 在 column 下失效的典型原因
最常遇到的情况是：父容器高度为
auto或被内容撑开，导致justify-content: center有参考范围，但align-items: center因为交叉轴（此时是水平方向）没有明确约束而“没得居中”。本质不是属性失效，而是交叉轴长度不可计算——比如父容器宽度是
100%，但没设min-width或受限于祖先，实际渲染宽度为 0。- 检查父容器 computed width 是否 > 0（用开发者工具看）
- 避免给 flex 容器套
width: fit-content或display: inline-flex后又没设width - 若父容器是响应式布局，某些断点下
width可能塌缩，align-items: center就会“看起来没反应” - 不要依赖
margin: auto在 column 布局中实现水平居中——它只在 flex 项自身是 block 且主轴方向有剩余空间时才生效，不稳定
图文混排时 column 布局的对齐陷阱
当图文作为同级子元素放入
flex-direction: column容器时，align-items: center会让所有子元素按自身宽度水平居中。但图片默认是 inline 元素，容易因基线对齐（baseline）产生意外偏移。例如：一张图片 + 一段文字，在
align-items: center下可能图片底部和文字基线对齐，视觉上“文字浮高”，显得没居中。- 解决方法一：给图片加
align-self: center或vertical-align: middle - 解决方法二：统一设
align-items: flex-start+ 子元素各自用margin: auto控制水平位置（更可控） - 更稳妥的做法是不用 column，改用
flex-direction: row+flex-wrap: wrap+justify-content: center，再配合align-content: center处理多行 - 注意 Safari 对
align-items: center在含图片的 column 布局中偶有渲染延迟，可加transform: translateZ(0)触发硬件加速
- 父容器：
