HTML图片居中需按场景选方法：父容器设text-align:center（行内场景）、图片设display:block+margin:auto（块级首选）、Flex布局（现代推荐），禁用已废弃的align属性。
HTML 图片默认左对齐，不写任何样式就是“靠左贴边”，想居中必须显式干预——不是加就完事，那个属性早被废弃了，现代浏览器可能直接忽略。
用 CSS 的
居中（适合行内场景）
当
在段落、
align="center"text-align
里作为行内元素时，最简单有效的方式是给父容器加
text-align: center
：
常见错误现象：
text-align: center
写在
display: flex
，
text-align
可能失效
示例：
margin: auto
居中（块级布局首选）
把图片变成块级元素后，
margin: auto
才能生效——这是更可控、更通用的做法。
常见错误现象：直接写
margin: auto
却没改
display
，图片还是行内元素，左右 margin 不会自动均分。
必须同时设置
display: block
图片需有明确宽度（否则
auto
无参照，可能撑满父容器）
兼容性极好，从 IE8 起就支持
比
text-align
更“干净”，不受父级文本对齐逻辑干扰
示例：
align
属性
display: flex
+
justify-content: center
加
align-items: center
可同时垂直居中（常被忽略）
图片无需改
display
，保持行内或块级都行
注意：父容器得有高度，否则垂直居中没效果
示例：