最轻量可靠方案是给底部区域父容器设 text-align: center，因 img 默认行内元素会自然居中；垂直居中需父容器有明确高度并配合 flex 或 padding，而非强求单靠 text-align。
父容器设 text-align: center 最轻量可靠
图片在底部区域水平居中，不需要 flex 或绝对定位。只要底部区域是块级容器（比如 <footer> 或带 class 的 <div>），直接给它加 text-align: center 就行——<img> 默认是行内元素，天然响应这个规则。
常见错误是把 text-align: center 写在 <img> 标签上，这完全无效；也有人误以为必须用 margin: 0 auto，但那需要 display: block + 明确宽度，在响应式场景下反而容易因 max-width: 100% 失效。
- 父容器要能撑开宽度（比如没被
float或display: inline-block拉窄） - 图片自身加
max-width: 100%和height: auto，防窄屏溢出、宽屏拉伸 - 如果父容器用了
font-size: 0（为清除 inline 间隙），记得给<img>单独设font-size: initial
垂直方向别强求“底部居中”，而是控制容器高度
所谓“页面底部区域”，本质是视觉上靠近页面底边的一块内容区，不是指浏览器窗口最底下那 1px。真要让图片在该区域内部垂直居中（比如上下留白均等），关键不在图片，而在父容器有没有明确的、可预测的高度。
例如：一个 <div class="footer-img"> 高度由内容撑开，就无法保证图片垂直居中；但若设 min-height: 80px 或 height: 60px，再配合 display: flex; align-items: center，就能稳定控制。
立即学习“前端免费学习笔记（深入）”；
- 只用
text-align: center只管水平，垂直位置由文档流决定（贴顶或随文字基线） - 若需垂直居中，父容器必须设
display: flex+align-items: center+ 明确高度（如min-height: 60px） - 避免对
body或footer直接设height: 100vh——它会破坏滚动，且和“底部区域”语义冲突
响应式断点里只改对齐方式，不重写图片尺寸
当底部区域在不同屏幕下需要切换对齐（比如小屏居中、大屏右对齐），媒体查询的目标应该是父容器的 text-align 值，而不是反复设置 img { width: 100% } 或 max-width。
图片尺寸约束只需在基础样式里写一次：max-width: 100% + height: auto。所有断点复用，避免冗余和冲突。
- 小屏居中：
@media (max-width: 768px) { .footer-img { text-align: center; } } - 大屏右对齐：
@media (min-width: 1025px) { .footer-img { text-align: right; } } - 别在每个媒体查询里重复写
img { max-width: 90vw }——它应该统一定义在全局 img 样式里
flex 布局慎用于多子元素的底部容器
如果底部区域除了图片还有文字、链接或按钮（比如版权信息+ logo + 社交图标），直接给整个容器设 display: flex; justify-content: center; align-items: center 会让所有子元素一起被居中，破坏原有排版逻辑。
这时更稳妥的做法是：只对图片所在局部容器用 flex，或者用 text-align 控制水平，靠 margin/padding 控制垂直间距。
- 不要在
<footer>上直接加display: flex——它会让所有直系子元素变成 flex item - 若必须用 flex，建议封装独立容器：
<div class="logo-wrapper"><img></div>，再单独设 flex -
align-items: center对“单行”子元素才自然有效；多个块级子元素并列时，垂直行为可能不符合预期
text-align + 合理 padding 就够；后者才值得引入 flex 和高度约束。 
