本文讲解如何通过合理使用 css 定位与布局机制（尤其是脱离文档流和分离容器/内容样式），使标题文字与中心图片彼此独立，避免缩放图片时带动文字位移。
在初学网页开发时，一个常见误区是：将文字和图片放在同一文档流中，并依赖 position: relative + transform 进行居中，却未意识到 relative 定位仍保留元素在文档流中的原始占位空间——这意味着当 .image2 img 尺寸增大时，其父容器 .image2 高度随之扩张，进而“推挤”相邻的 .wrd-box（即使它用了 transform: translate(-50%, -50%)），导致视觉上文字“跟着动”。
根本解法不是强行固定文字位置，而是解耦布局关系：让文字与图片成为两个逻辑独立、互不影响的区块，并各自实现精准居中。
✅ 推荐结构优化（HTML）：
