图片居中失效的根本原因是渲染上下文不匹配：text-align仅对行内级子元素有效，flex/grid需justify-content，垂直居中需父容器有明确高度，响应式偏移需object-fit+object-position配合。
直接给 <img> 加 margin: 0 auto 或 text-align: center 很可能失效——不是方法错了，而是你没控制好它的渲染上下文。
为什么图片加了 text-align: center 还是不居中？
因为 text-align 作用在父容器上，只影响**行内级子元素**的水平对齐。但一旦父容器有 float、position: absolute、display: flex/grid，或者自身宽度不明确（比如没设 width 且内容撑不开），text-align 就会“失能”。
- 检查 computed styles：确认父容器的
display是block或inline-block，且没有overflow: hidden裁切内容 - 避免在父容器上同时用
float和text-align——float会让元素脱离文档流，text-align对它无效 - 如果父容器是
flex或grid，text-align完全不起作用，得换用justify-content或place-items
display: flex 居中时 align-items: center 没反应？
这是最常被忽略的一点：align-items 控制交叉轴（默认是垂直方向），但它只在父容器有**明确高度**时才生效。如果父容器高度塌缩（比如只有文字内容、没设 height 或 min-height），那图片就只能顶着顶部显示。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 给父容器加
height: 100vh（视口全高）或min-height: 200px等具体值 - 如果父容器本身是响应式高度（比如随内容伸缩），又想垂直居中，可改用
place-content: center（需配合display: grid）或margin: auto（仅限块级<img>且父容器为flex/grid） - 别在
<img>上写vertical-align: middle——它只对行内/表格单元格有效，在flex容器里完全被忽略
响应式图片居中后，小屏变大、大屏变小，怎么保持关键区域不偏移？
单纯靠 max-width: 100% + height: auto 只能保证等比缩放，不能锁定焦点。比如一张人像图，缩放后人脸可能跑出可视区。
- 用
object-fit: cover替代简单缩放，让图片填满容器并裁剪多余部分 - 配合
object-position: 20% 30%（数值可调），把图片中你想保留的关键部位（如眼睛、logo）锚定在容器内指定坐标 - 注意：
object-position只在object-fit为cover、contain或none时生效；IE 不支持，需 fallback 时可用background-image+background-position
真正难的不是“怎么居中”，而是判断当前布局上下文是否允许你用某个方案——比如父容器是 position: relative，你就该优先考虑 transform: translate(-50%, -50%)；如果是卡片网格项，object-fit + object-position 才是防偏移的核心。别背代码，先看 computed styles 里的 display、height、position。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
