放弃float用text-align或flex布局实现图片居中：text-align适用于父容器内单行图片；flex支持水平垂直居中且控制力强；保留float的负margin方案不推荐。
图片设置浮动后无法居中，是因为 float 属性本身会脱离文档流，并向左或右对齐，不支持 margin: 0 auto 这类居中方式。想让“浮动的图片”视觉上居中，本质是绕过 float 的限制，改用更现代、可控的布局方式。
放弃 float，用 text-align 实现行内居中
这是最简单直接的方案，适用于图片在块级容器中单独一行显示的场景：
- 给图片的父容器（如 div）设置 text-align: center
- 确保图片是行内元素（默认就是
<img>，无需额外设置） - 移除图片上的
float，避免干扰
示例：
<div style="text-align: center;"><img src="example.jpg" alt="示例图">
</div>
用 Flex 布局替代 float，真正灵活居中
Flex 是目前推荐的主流方案，控制力强、兼容性好（IE10+），且天然支持水平垂直居中：
立即学习“前端免费学习笔记（深入）”；
- 给父容器设置 display: flex 和 justify-content: center
- 如需垂直居中，再加 align-items: center
- 同样要移除图片的
float
示例：
<div style="display: flex; justify-content: center;"><img src="example.jpg" alt="示例图">
</div>
若必须保留 float，用负 margin + 宽度控制模拟居中
仅作了解，不推荐用于新项目。前提是图片有固定宽度：
- 给图片设固定宽度（如
width: 200px） - 设置
float: left（或 right） - 再用
margin: 0 auto无效，改用margin-left: calc(50% - 100px)（100px = 宽度一半） - 父容器需有明确宽度（如
width: 100%）
该方法脆弱、易出错，响应式下难维护，建议优先选前两种方式。
小结：别为 float 强行居中
float 的设计初衷是文字环绕，不是布局定位。现代页面中，text-align 适合简单居中，flex 适合精准控制。只要去掉 float，居中就变得自然又可靠。
