DaisyUI 中图片无法居中是因为其不提供专用居中类，需配合 Tailwind 布局类使用：图片需设为 block 或 inline-block 才能生效 mx-auto；父容器为 flex 时用 justify-center items-center；avatar 仅适用于圆形头像，非通用方案。
图片在 DaisyUI 里为什么死活不居中？
因为 DaisyUI 本身不提供 text-center 或 flex justify-center 这类“直接对齐图片”的专用类，它依赖 Tailwind 的基础布局能力。你得自己组合用，不是找一个叫 img-center 的类就能搞定。
常见错误现象：class="avatar center" 没反应、class="img-responsive mx-auto" 不生效、用 text-center 包住 <img> 却发现图片还是左贴边——那大概率是图片没设成 inline 或被父容器的 display 卡住了。
-
<img>默认是inline元素，mx-auto只对block或flex元素生效，所以必须加block或inline-block - 如果父容器用了
flex（比如card-body），直接加justify-center items-center更稳，别只靠mx-auto - DaisyUI 的
avatar组件自带居中逻辑，但它是圆形裁剪容器，不是通用图容器；真要放普通图，别硬套avatar
用 Tailwind 原生命令对齐图片（DaisyUI 下最可靠）
DaisyUI 和 Tailwind 是同一套 CSS 体系，所有 Tailwind 的布局类都可用。对齐图片就三条路：水平居中、垂直+水平居中、响应式居中。选哪条取决于容器类型。
- 单图水平居中：
<div class="text-center"><img src="x.jpg" class="inline-block"></div>或<img src="x.jpg" class="block mx-auto"> - 卡片内居中（比如
card）：<div class="card"><div class="card-body flex flex-col items-center"><img src="x.jpg" class="mb-2"></div></div> - 头像类圆图（用 DaisyUI
avatar）：<div class="avatar"><div class="w-16 rounded-full"><img src="x.jpg"></div></div>—— 注意这里w-16控尺寸，rounded-full是圆角，不是avatar-circle这种伪类
为什么 object-fit 类和对齐类要分开写？
很多人以为 class="rounded-box object-contain w-full h-48 mx-auto" 就能又缩放又居中，结果图被拉伸或切掉——因为 object-fit 控制的是图片在容器内的“怎么显示”，而 mx-auto 或 flex 控制的是“容器怎么摆”。两者不互斥，但必须共存才完整。
立即学习“前端免费学习笔记（深入）”；
-
object-contain保持比例、留白；object-cover裁剪填满；选错会导致对齐失效（比如cover下边缘被切，你以为偏了其实是裁了） - 设了
w-48 h-48但没设object-fit，图片会按原始宽高溢出或压缩，mx-auto对它没意义 - 响应式场景下，用
max-w-full h-auto+mx-auto比固定宽高更安全，尤其配srcset
DaisyUI 主题切换时图片对齐会变吗？
不会。DaisyUI 的主题（data-theme="dark" 等）只改颜色变量（--p, --b1），不影响布局类行为。但有个隐藏坑：某些主题自定义了 img 的默认 max-width 或 display，尤其是用 prose 类渲染富文本时。
- 检查是否误套了
prose—— 它会给img加block mx-auto，但也会强制max-w-none，可能撑破容器 - 如果你用
class="mockup-browser"这类视觉组件包图，它内部有固定结构，外部加mx-auto无效，得改里面mockup-browser-body的子元素 - 最保险做法：对关键图片显式写
class="block mx-auto"，不依赖任何主题或组件的隐式样式
