图片水平居中最常用方案是给父容器设text-align: center；若需脱离行内流，则用display: block加margin: 0 auto，二者均需满足对应条件（如父容器为块级、图片有明确宽度等）才能生效。
用 text-align: center 让图片在块级容器中居中
图片默认是行内元素，直接加 text-align: center 不生效，必须让它所在的父容器（比如 <div>）设置该样式。这是最常用、兼容性最好的方式。
- 确保图片在有明确宽度的块级容器内，例如：
<div style="text-align: center;"><img src="logo.png" alt="logo"></div>
- 如果父容器是
<p>或<section>等默认块级元素，同样适用 - 注意：
text-align作用于其内部的行内内容，所以对<img>有效，但对设置了display: block的图片无效（此时它已脱离行内流）
用 margin: 0 auto 配合 display: block
这是更“精准”的居中方式，本质是让图片变成块级元素后，左右外边距自动分配。适合需要严格控制布局或响应式场景。
- 必须同时设置：
display: block和margin: 0 auto - 示例：
<img src="icon.jpg" alt="icon" style="display: block; margin: 0 auto;">
- 如果图片本身没有固定宽度（比如用了
max-width: 100%），margin: 0 auto依然有效，但需确保父容器有明确宽度或不溢出 - 不推荐单独只写
margin: auto—— 某些旧版浏览器可能不识别垂直方向上的auto值
避免踩坑：这些写法看似合理，实际无效
很多初学者会尝试直接给 <img> 加 align="center" 或 style="margin: auto"，但它们要么已废弃，要么缺少必要前提。
-
align="center"是 HTML4 的过时属性，在 HTML5 中已被废弃，现代浏览器虽可能兼容，但不应依赖 - 只写
margin: auto而不设display: block：因为<img>默认是行内元素，margin-top/margin-bottom对它无效，左右 margin 也不会触发居中逻辑 - 用
float: left后再加margin: 0 auto：浮动元素脱离文档流，margin: 0 auto失效，且容易引发清除浮动问题
Flexbox 方案：适合现代项目，但要注意兼容性
如果目标环境支持 IE11+ 或主流现代浏览器，用 Flex 布局更灵活，尤其当图片需要和其他元素一起居中时。
立即学习“前端免费学习笔记（深入）”；
- 父容器设置：
style="display: flex; justify-content: center;"
- 无需改动
<img>标签本身，也不依赖图片是否为块级 - 注意：IE10 需要加
-ms-前缀，IE9 及以下完全不支持，若需兼容老系统请绕开 - 如果父容器高度受限，且希望图片垂直也居中，可加
align-items: center，但这是额外需求，水平居中只需justify-content
text-align: center 和 margin: 0 auto 这两种方案覆盖了绝大多数情况。真正容易被忽略的是：居中效果是否依赖父容器的宽度表现，以及图片自身是否被其他 CSS（比如 float 或 position）干扰了正常流。 
