flex-direction: column时子元素垂直居中需用justify-content: center；默认row方向下align-items: center才生效；多行文字居中受字体度量和浏览器渲染差异影响。
flex-direction: column 时子元素垂直居中失效？
不是 flex 不行，是默认主轴方向不对。display: flex 默认 flex-direction: row，此时 align-items 控制的是**交叉轴**（即垂直方向）的对齐，所以单行文字用 align-items: center 就能垂直居中；但多行文字本身是块级内容，要让它在容器里垂直居中，得让容器的主轴变成垂直方向。
- 把容器设为
flex-direction: column，再用justify-content: center—— 这时主轴是垂直的，justify-content才管垂直居中 - 更常用且简洁的做法：保持
flex-direction: row，直接用align-items: center+height或min-height给容器定高 - 如果容器高度由内容撑开（比如没设
height），align-items: center看起来“没反应”，因为交叉轴没有剩余空间可分配
多行 <p> 在 flex 容器中不换行还溢出？
这是 white-space 和 flex-shrink 共同导致的。flex 项默认会压缩（flex-shrink: 1），但纯文本节点在无明确宽度约束时可能拒绝换行，尤其遇到长单词或连续英文。
- 给文字容器加
word-break: break-word或overflow-wrap: break-word - 确保父容器有明确宽度（如
width: 100%或max-width），否则 flex 项可能无限拉伸 - 必要时显式关闭收缩：
flex-shrink: 0，但要配合width或max-width，否则容易撑破布局 - 避免对
<p>直接设flex，它本就是块级，套一层<div>更可控
align-items: center 对多行文字生效但上下留白不均？
这不是居中失败，是字体度量（font metrics）导致的视觉偏差。浏览器按 font’s ascent/descent 基准线对齐，而 align-items: center 居中的是整个行盒（line box）的边界框，不是文字“看起来”的中心。
- 用
line-height调整行高（比如设为容器高度），比依赖align-items更稳定 - 若必须用 flex，可加
padding-top微调，但属于 hack，不推荐用于通用组件 - 检查是否意外继承了外边距（如
<p>的默认margin），它会干扰视觉居中 - Chrome 和 Safari 对
vertical-align: middle渲染略有差异，flex 下基本一致，但别混用vertical-align
IE11 下 align-items: center 不工作？
IE11 的 flex 实现有两处关键坑：不支持 align-items 在单行 flex 容器上对齐多行内联内容；且对 min-height + flex 的组合支持极差。
立即学习“前端免费学习笔记（深入）”；
- 必须给容器设明确的
height（不能只靠min-height） - 避免在 IE11 中对
<p>直接用 flex，改用<div>包裹并设display: table-cell+vertical-align: middle - IE11 不识别
align-content，所以多行 flex 容器（flex-wrap: wrap）无法用它控制垂直间距 - PostCSS 自动补全的
-ms-flex-align: center只对老版语法有效，新写法需手动加前缀或降级方案
真正麻烦的不是怎么写，而是多行文字的“行高”和“字体渲染”在不同浏览器里根本不是一回事——你调出来的居中，往往只是恰好在当前 Chrome 版本里看起来对了。
