最直接方式是用 display: flex 配合 justify-content: center 和 align-items: center，但容器需有明确高度（如 min-height）；图片设 display: block 避免基线问题；图文并排时注意 flex-wrap 与 align-self 调整；IE11 等旧浏览器需兼容处理。
图片和文字在容器内水平垂直居中（flex 基础写法）
用 display: flex 配合 justify-content 和 align-items 是最直接的方式，但前提是容器有明确宽高或能撑开——否则 align-items: center 可能看起来没效果。
-
justify-content: center控制主轴（默认是水平）对齐，让子元素水平居中 -
align-items: center控制交叉轴（默认是垂直）对齐，让子元素垂直居中 - 如果容器没有设置高度，且内部只有文字和图片，浏览器可能按内容高度渲染，导致“垂直居中”不可见；建议给容器加
min-height或固定height - 图片默认是
inline元素，会受行高、基线影响，建议统一设为display: block或vertical-align: middle（仅对 inline 场景有效）
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 200px; /* 关键：提供参考高度 */
border: 1px solid #ccc;
}
.container img {
display: block; / 避免底部空白 /
max-width: 100%;
height: auto;
}
.container span {
margin-left: 12px; / 图文间距 /
}
图文并排时文字换行错位（flex 下的 flex-wrap 与对齐陷阱）
当文字较长、容器较窄，又没设 flex-wrap，文字可能溢出或挤压图片。此时 align-items: center 仍生效，但视觉上“不对齐”，其实是文字行盒（line box）的基线参与了对齐。
- 默认
align-items: stretch会让所有子项拉满容器高度，而center是按内容盒（content box）中心对齐 - 文字如果是多行，它的“内容盒”顶部可能高于图片顶部，造成视觉偏移
-
解决方法之一：给文字加
align-self: center强制单独对齐；更稳妥的是把图文包进一个div再整体居中 - 若需响应式换行，加
flex-wrap: wrap，但此时align-items仍作用于每行，不是整个容器
图片文字居中但右侧留白异常（justify-content 与内容尺寸关系）
常见现象：图片+文字居中后，右边空一大块，尤其在移动端。这往往是因为容器本身宽度超出内容所需，而 justify-content: center 把整个 flex 行居中了，不是把图片和文字分别居中。
- 检查父容器是否设置了过大的
width或max-width，比如width: 100%在窄屏下仍会拉满屏幕 - 避免对 flex 容器设
text-align: center，它对 flex 子项无效，还可能干扰内联元素 - 如需“图片左对齐 + 文字右对齐 + 整体垂直居中”，应改用
justify-content: space-between，并确保只有两个子元素 - 图片设
flex-shrink: 0防止被压缩，文字用flex: 1占剩余空间
兼容性与替代方案提醒（IE11 及以下不支持 flex 居中）
如果必须支持 IE11，display: flex 的 align-items: center 虽基本可用，但存在 bug：当容器 height 为百分比且父级无高度时，垂直居中失效。
立即学习“前端免费学习笔记（深入）”；
- IE11 中
min-height+ flex 垂直居中有时不触发，建议改用height: 100vh或 JS 补偿 - 完全放弃 flex？可用
position: absolute+transform: translate(-50%, -50%)，但需父容器position: relative - 纯文字场景可考虑
line-height == container height，但图片引入后此法失效 - 现代项目优先用 flex，只需注意 Safari 旧版本对
align-items在min-height容器中的兼容性波动
实际中最容易忽略的，是容器自身有没有形成 BFC 或获得可计算的高度——flex 的 align-items 不是魔法，它依赖交叉轴长度有据可依。
