父容器必须有明确高度，否则align-items:center无效；图片需设display:block或vertical-align:middle；flex-direction:column时justify-content控制垂直、align-items控制水平；ie11需加-ms-前缀或降级方案。
父容器必须有明确高度，否则 align-items: center 看不出效果
很多人写了 display: flex 和 align-items: center 却没看到垂直居中，根本原因是父容器高度为 auto —— 浏览器按内容撑开，align-items: center 有参考范围但“没得居中”。
实际做法：min-height 比 height 更安全，尤其在响应式场景下；若容器是全屏或模态框，可直接用 height: 100vh 或 min-height: 100vh。
图片默认是 inline 元素，会受基线影响
即使用了 Flex，<img> 默认仍是 inline，其 vertical-align 默认为 baseline，和旁边文字对齐时会明显偏下。
解决方式：
• 给 <img> 加 display: block（推荐，一劳永逸）
• 或加 vertical-align: middle（仅对 inline 场景有效，且需文字也设相同值）
• 不要依赖 margin: auto 在 Flex 里“碰运气”，它只在单个子元素且无其他约束时才可靠
flex-direction: column 时对齐逻辑会反转
如果父容器设了 flex-direction: column（比如图文上下排列），justify-content 控制的是垂直方向，align-items 控制的是水平方向。
常见翻车点：
• 只写 justify-content: center → 文字垂直居中了，但水平仍左对齐
• 忘加 align-items: center → 看起来“没居中”
• 子元素是 <p></p> 这类块级元素，内部文字还需额外加 text-align: center，否则每行还是左对齐
IE11 等旧浏览器需要兼容前缀
Flexbox 在 IE10–11 中支持有限，align-items 需要 -ms-flex-align: center，display: flex 需要 display: -ms-flexbox。
但注意：
• flex-wrap、gap 等现代属性在 IE 中完全不支持
• 若项目必须兼容 IE，建议降级用 display: table-cell + vertical-align: middle，或绝对定位 + transform: translate(-50%, -50%)
• 现代项目中，优先确认目标用户是否真会用 IE —— 很多“兼容需求”其实只是历史文档没更新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
