text-align: center对图片失效，因该属性仅作用于块级父容器内的行内内容，而常见原因包括父容器无明确宽度、被float或position: absolute干扰、或图片自身设了display: block脱离行内上下文。
图片是行内元素，text-align: center 为什么有时不管用？
因为 text-align 只作用于块级容器内的**行内内容**，而图片默认是 inline 元素，理论上该属性能生效。但常见失效场景有：父容器没设宽度、父容器被 float 或 position: absolute 干扰导致文档流异常、或子元素被 display: block 强制改写后脱离行内上下文。
实操建议：
- 确保父容器是标准块级元素（如
div），且未设置overflow: hidden或transform等触发新层叠上下文却未处理尺寸的属性 - 不要给图片加
display: block后还指望text-align生效——此时应换用margin: 0 auto - 如果父容器宽度由内容撑开（比如没设
width或min-width），text-align仍会起作用，但视觉上“看不出居中”，因容器本身没多余空间
margin: 0 auto 对图片无效？检查这三件事
这个方法只对**块级且有明确宽度**的元素有效。图片默认不是块级，也不自带宽度声明，所以直接写 margin: 0 auto 没反应。
实操建议：
- 先加
display: block把图片转成块级 - 再设一个具体宽度（如
width: 200px）或相对单位（如width: 80%），否则浏览器无法计算左右 margin 的分配空间 - 若图片需响应式缩放，用
max-width: 100%+height: auto替代固定宽高，并配合margin: 0 auto——此时它依赖父容器有可参照的宽度
Flexbox 居中时，align-items 和 justify-content 为什么没效果？
这两个属性作用于 Flex 容器，控制的是**所有直接子元素**在交叉轴和主轴上的对齐。但它们生效的前提常被忽略。
实操建议：
- 父容器必须设
display: flex，且不能同时被float、position: absolute或display: contents破坏盒模型结构 - 容器需有可参考的高度（如
min-height: 200px或height: 100vh），否则align-items: center在垂直方向“无处可中” - 图片本身若设了
width: 100%或flex: 1，会撑满主轴，导致justify-content: center失去作用空间
Grid 的 place-items: center 在哪些情况下会静默失效？
它看起来最简，但实际依赖严格的 Grid item 行为。一旦子元素脱离 Grid item 身份，整个居中逻辑就断了。
实操建议：
- 确认父容器用了
display: grid，且没被其他 display 值覆盖（比如嵌套了display: flex的子容器） - 避免给图片加
position: absolute或float——这些会让它退出 Grid item 流程 - IE 不支持 Grid，但现代项目基本不用考虑；真正要注意的是，
place-items对多子元素统一居中，若只想居中某一张图，得用justify-self: center+align-self: center写在该图片上
真正容易被忽略的点是：所有居中方案都依赖父容器具备可测量的尺寸边界。没有 height、min-height 或视口单位，align-items 和 place-items 就像瞄准空气——不是代码错了，是靶子没立稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
