用 flex + justify-center + items-center 是最稳的图片水平垂直居中方式，需父容器设 flex 且图片为块级元素；Grid 中用 place-self-center 精确控制单图居中，text-center 仅在图片为行内元素且父容器设该类时偶然生效。
图片在Flex容器里怎么水平垂直居中
用 flex + justify-center + items-center 是最稳的组合，尤其适合模态框、卡片封面、登录页头像这类固定宽高的场景。别直接给图片加 text-center，那是针对行内元素的，对块级 <img> 无效。
常见错误是只写 justify-center，结果图片上下还是贴着顶部——因为没启用交叉轴对齐。必须同时加 items-center，且父容器得是 flex。
- 父容器需设
flex（或flex-col），否则justify/items类不生效 - 如果图片本身有
display: block（Tailwind 默认就是），它不会响应text-align - 想让图片撑满容器再居中？加
object-cover和w-full h-full，但注意父容器要有明确宽高，否则会塌缩
图片左/右对齐并文字环绕怎么办
用 float-left 或 float-right，配合 ml-4 / mr-4 控制文字间距。这是唯一能实现传统“图文混排”的 Tailwind 方式，text-align 类在这里完全没用。
注意：浮动元素会脱离文档流，后面内容可能塌上去。稳妥做法是紧接一个带 clear-both 的空 <div>，或者直接用 after:clear-both 伪元素清浮动（需额外写一点 CSS，Tailwind 默认不提供 clearfix 工具类）。
-
float-left后文字从右侧开始流，不是“左对齐文字+右对齐图片” - 移动端想取消浮动？加响应式前缀，比如
md:float-left - 避免用
text-right对齐图片——那只是把图片当成行内元素塞进右对齐文本流，高度不对齐、换行不可控
图片在Grid里怎么居中单格
Grid 容器里单张图片居中，推荐用 place-self-center。比写 justify-self-center items-self-center 更简洁，而且语义明确——只影响当前子项，不影响其他格子。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
如果你已经用了 place-items-center 在 grid 容器上，那所有子项都会居中；但多数时候你只想居中某一张图，这时候 place-self-center 就是精确控制的关键。
- 必须确保该图片是 Grid 直接子元素，嵌套一层
<div>就失效 - Grid 容器不能是
inline-grid且无宽高限制，否则可能看不出居中效果 - 和 Flex 不同，Grid 下
text-center依然无效——居中逻辑由网格轨道决定，不是文本对齐
为什么 text-center 有时看起来“管用”
那是因为图片被包在了一个 block 元素（比如 <p> 或 <div>）里，而这个父容器被设了 text-center。实际上起作用的是父容器的文本对齐，把图片当行内元素处理了；一旦图片设了 block 或加了 flex，立刻失效。
这种写法脆弱、不可预测，尤其在响应式断点切换时容易错乱。真正可控的方式永远是：明确布局上下文（Flex/Grid），再用对应轴向的对齐类。
最常被忽略的一点：图片默认是 inline，但 Tailwind 的 block、flex、grid 等工具类会覆盖它——对齐方式必须跟布局模型匹配，不能混用逻辑。
