UnoCSS 的 text-align 类对图片无效，因其仅作用于父容器内的行内内容，需加在父块级容器上；图片居中应优先用 block mx-auto，Flex 仅适用于需水平垂直居中的场景。
UnoCSS 的 text-align 类对图片无效？先搞清作用对象
图片默认是行内元素（<img>），但 text-align 只对**父容器内的行内内容**起作用，不是直接控制图片自身。所以给 <img> 加 text-center 没反应，真正要加的是它的**父块级容器**（比如 <div> 或 <p>）。
常见错误现象：<img src="a.jpg" class="text-center"> —— 完全没效果，因为 <img> 自身不响应 text-align。
- 正确写法：
<div class="text-center"><img src="a.jpg"></div> - 若图片已设为块级（如加了
block），再用text-center就更没意义——此时应改用mx-auto - 注意：UnoCSS 默认启用
text预设，text-left/text-center/text-right都可用，无需额外配置
mx-auto 才是图片居中的主力，但有前提条件
当图片设为块级（block）后，margin: 0 auto 才能生效，UnoCSS 提供的 mx-auto 就是为此设计的。但它不会自动帮你把图片变块级——这步必须显式声明。
典型失效场景：<img src="a.jpg" class="mx-auto"> —— 图片仍是行内，margin 对行内元素左右无效，结果还是左对齐。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须组合使用：
<img src="a.jpg" class="block mx-auto"> - 如果父容器有固定宽度（比如
w-64），且图片本身宽度过大，mx-auto仍会居中，但可能溢出；建议配合max-w-full或w-full - 在 Flex 容器里，
mx-auto会被 Flex 对齐方式覆盖，此时优先用justify-center等 Flex 工具类
Flex 布局对齐图片更可控，但别滥用 flex 包裹单张图
用 flex justify-center items-center 包裹一张图确实能居中，但这是“杀鸡用牛刀”：它强制创建新格式化上下文，可能干扰外层流式布局，还增加一层 DOM 节点。
适用场景有限：仅当你需要同时控制**水平 + 垂直居中**（比如模态框头像、卡片图标），或图片需在固定高宽容器中精确居中时才值得用。
- 简单居中优先选
block mx-auto，语义清晰、开销最小 - 若要用 Flex，请确保父容器有明确尺寸（如
h-32），否则items-center可能无感 - UnoCSS 中
flex相关类默认启用，但注意justify-items不适用于 Flex 容器（那是 Grid 的），别混淆
响应式对齐容易漏掉断点，sm:text-center md:mx-auto 这类组合要小心顺序
UnoCSS 按照断点前缀字母顺序生成 CSS 规则（sm → md → lg），所以 sm:text-center md:mx-auto 在中屏及以上会以 mx-auto 覆盖 text-center —— 但前提是图片是块级。如果只在 md 加 block，那 sm 下仍是行内，text-center 有效，md 下变成块级+mx-auto，逻辑才自洽。
- 推荐写法：
<div class="sm:text-center"><img src="a.jpg" class="md:block md:mx-auto"></div> - 错误示范：
<img src="a.jpg" class="sm:text-center md:mx-auto">——text-center加在行内元素上，sm无效；md:mx-auto也因缺少md:block失效 - UnoCSS 默认支持响应式前缀，但需确认你的 preset 启用了
responsive（绝大多数模板都已启用）
真正卡住人的往往不是类名记不住，而是没分清「对齐谁」和「谁在起作用」——图片自身、父容器、Flex 上下文，三者权限不同，混用就互相抵消。动手前先问一句：我要动的是盒子，还是盒子里的字？
