父容器必须有明确高度，否则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 alt="CSS Flex布局如何实现图片和文字垂直居中？" > 默认仍是 inline，其 vertical-align 默认为 baseline，和旁边文字对齐时会明显偏下。
解决方式：
• 给 <img alt="CSS Flex布局如何实现图片和文字垂直居中？" > 加 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><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 这类块级元素，内部文字还需额外加 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 —— 很多“兼容需求”其实只是历史文档没更新
立即学习“前端免费学习笔记（深入）”；
真正卡住人的从来不是语法，而是容器有没有高度、图片是不是 inline、主轴方向有没有被悄悄改掉。这些细节不手动检查一遍 DevTools 的 computed styles，光抄代码很容易原地打转。
