父容器必须启用flex且有明确高度，否则justify-content和align-items无效；.container2应改用max-width:1000px;width:100%;.divbox3需设width:100%和box-sizing:border-box；图片须保持普通子元素状态，避免脱离文档流。
父容器必须启用 flex 且有明确高度
很多人写了 justify-content: center 和 align-items: center 却没效果，根本原因是父容器没真正变成 flex 上下文，或者高度塌陷。嵌套结构中，上层容器（比如 .container2）若仍用 width: 1000px 固定宽，下层 .divbox3 就无法继承响应式宽度，导致图片即使设了 max-width: 100% 也卡在固定尺寸里。
实操建议：
-
.container2改为max-width: 1000px; width: 100%; margin: auto;，放弃固定width -
.divbox3必须设width: 100%（不能留空或写1000px），并加box-sizing: border-box - 如果要垂直居中，
.divbox3本身就得有高度参照——要么设min-height: 200px，要么靠外层容器（如.container2）提供height或min-height
图片自身不能脱离文档流
嵌套越深，越容易误加 position: absolute、float 或 display: inline-block，这些都会让图片脱离 flex 容器的对齐控制。一旦脱离，justify-content 和 align-items 就完全失效。
常见错误现象：
- 图片突然“飘”到左上角或顶部 —— 很可能父容器是
relative，而图片被加了absolute - 水平居中了但垂直贴顶 —— 图片还在行内流，或父容器高度为
auto且无内容撑开 - 多张图片错位堆叠 —— 某个中间容器用了
display: grid或inline-flex，覆盖了外层 flex 行为
正确做法：保持 img 是普通子元素，不加 position、float，也不手动设 margin；居中逻辑全交给父级 flex 容器。
text-align: center 在嵌套中只管水平，且依赖行内上下文
如果只是想水平居中（比如图文混排的 banner），text-align: center 确实轻量，但它在嵌套结构里极易失效：只要某一级父容器设了 display: flex、display: grid 或 font-size: 0，就会中断行内对齐链。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
使用条件：
- 确保目标图片的**直接父容器**设置了
text-align: center - 该父容器不能是
flex或grid容器（否则它会忽略text-align） - 图片不能有
display: block或float，否则不再视为“行内内容” - 避免在祖先容器中用
font-size: 0（常用于清除间隙），否则图片可能消失或错位
示例安全写法：<div class="img-wrapper" style="text-align: center;"><img src="..."></div>，且 .img-wrapper 不参与任何 flex/grid 布局。
响应式缩放与居中必须分离控制
很多人试图用一个媒体查询同时改 width、margin 和 text-align，结果维护困难、行为不可预测。其实缩放和居中是两个独立问题：缩放靠 max-width: 100% + height: auto，居中靠容器布局模式（flex/text-align/position）。
关键点：
- 图片样式应始终包含
max-width: 100%和height: auto，这是响应式缩放的底线，不要放到媒体查询里重复写 - 居中方式（flex / text-align / absolute）应在最外层或最近一层父容器上统一控制，避免每层都加一套规则
- 如果需不同断点切换对齐方向（如小屏居中、大屏右对齐），只覆盖父容器的
justify-content或text-align，别碰图片本身的尺寸
最容易被忽略的是：嵌套越深，越需要检查每一级容器的 display 值是否意外覆盖了上层布局意图——比如某个 .divbox2 被悄悄设成 display: inline-block，就会让它的父容器 flex 失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
