靠 align-items 和 justify-content 属性，但前提是容器设了 display: flex 且有明确高度（如 height 或 min-height），否则因无垂直方向可居中空间而失效。
flex 容器中图片和文字垂直居中靠什么属性？
靠 align-items 和 justify-content，但关键在容器是否设了 display: flex 且高度可控。如果父容器没明确高度（比如只靠内容撑开），align-items: center 看似没效果——不是属性错了，是容器本身没“垂直方向可居中的空间”。
-
align-items: center控制交叉轴（默认为垂直方向）的对齐，适用于单行或多行 flex 项目 -
justify-content: center控制主轴（默认为水平方向）的对齐，常配合使用实现完全居中 - 若文字换行或图片较大，需额外注意
flex-wrap: wrap或min-height防止内容溢出挤压
为什么图片和文字一起用时经常上下错位？
因为图片默认是 vertical-align: baseline，而文字有基线、x 高度、下降部等，导致视觉上“没对齐”。Flex 布局下这个行为会被覆盖，但前提是图片不能是 inline 元素被意外包裹在文本流里——必须确保它和文字同级、同为 flex item。
- 避免把
<img>放在<span>或<p>里再塞进 flex 容器；应让<img>和<span>并列作为直接子元素 - 图片默认有底部空白（类似 inline 元素的基线间隙），加
vertical-align: top/middle/bottom可临时缓解，但 flex 下更推荐统一用align-items - 文字行高（
line-height）远大于容器高度时，也会拉偏整体位置，建议设line-height: 1或与容器高度匹配
实际代码怎么写才可靠？
最简可行结构：容器设高度 + flex + 对齐，子元素不设浮动、不设 vertical-align、不嵌套干扰布局。
.container {
display: flex;
align-items: center;
justify-content: center;
height: 200px; /* 必须有明确高度 */
border: 1px solid #ccc;
}
<p>.container img,
.container span {
margin: 0;
}</p><div class="container"> <img src="icon.png" alt="icon" width="40" height="40"> <span>标题文字</span> </div>
如果需要响应式高度，可用 min-height 替代 height，或结合 aspect-ratio 控制宽高比，否则在移动设备上容易塌陷失居中。
立即学习“前端免费学习笔记（深入）”；
兼容性要注意哪些细节？
现代浏览器对 align-items: center 支持良好，但老版本 Safari（≤9）和 IE10–11 对 flex 的交叉轴处理有偏差，尤其当子元素含 margin-top/bottom 或 padding 时。
- IE11 不支持
align-items在column方向的某些组合，建议始终用默认flex-direction: row - Safari ≤9 对
img在 flex 中的尺寸计算不稳定，可加flex-shrink: 0防止压缩 - 如果容器内只有图片+文字，且需兼容到 Android 4.4，建议补一句
align-self: center到图片和文字上，作为兜底
flex 垂直居中的核心从来不是“怎么写对齐”，而是“容器有没有可居中的参照高度”——没高度，再对也白对。
