img 默认不居中因其为行内元素，对齐基线且有间隙；可用 display: block + margin: 0 auto（最稳）、text-align: center（父容器需明确宽度）、flex 布局或绝对定位（需 relative 父容器）实现居中。
img 标签默认不居中，是因为它行内元素特性
HTML5 中的 <img> 默认是行内元素（inline），会像文字一样对齐在父容器基线（baseline）上，左右有空白间隙，也不会自动水平居中。这不是 bug，是 CSS 渲染规则决定的。
常见错误现象：margin: 0 auto 对 <img> 无效、图片卡在左边、右侧留白不一致、用 text-align: center 试了没反应（其实是有效的，但常被父容器限制或覆盖）。
- 必须确保父容器宽度明确（比如不是
fit-content或未设宽的<div>） -
text-align: center只对行内元素起作用，所以对<img>有效，但只影响水平对齐；若父容器是 flex 或 grid，它可能被忽略 - 如果图片被包在
<p>或<span>里，要检查这些包裹元素是否设置了display: inline（默认就是），否则text-align不生效
用 display: block + margin: 0 auto 最稳
这是最通用、兼容性最好、也最容易理解的方式：把 <img> 变成块级元素，再用自动外边距居中。
适用场景：单图展示、响应式页面、需要精确控制尺寸的卡片/封面图。
立即学习“前端免费学习笔记（深入）”；
- 必须给
<img>显式设置display: block，否则margin: 0 auto不生效 - 父容器无需特殊样式，但不能是
overflow: hidden且高度过小，否则可能裁剪 - 注意图片原始宽高比，
width: 100%或max-width: 100%配合居中更安全，避免溢出
img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
Flex 布局居中适合现代项目，但要注意父容器
用 display: flex 居中图片简洁直接，但容易踩坑——不是所有“看起来像容器”的元素都适合当 flex 父级。
常见错误现象：图片没动、整个页面错位、其他子元素被拉伸、移动端失效。
- 父容器必须显式声明
display: flex，且推荐加上justify-content: center（水平）和align-items: center（垂直） - 如果父容器是
<body>或<html>，记得重置默认 margin/padding，否则可能有滚动条或偏移 - flex 容器里的
<img>默认会拉伸填满，加align-self: center或设flex-shrink: 0更稳妥
绝对定位居中仅限固定尺寸容器，慎用于响应式
用 position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%) 能精准居中，但前提是容器尺寸可控。
使用场景：模态框里的 logo、加载动画、CSS 动画层中的图标。
- 父容器必须设
position: relative（或absolute/fixed），否则定位基准是视口 - 图片宽高不确定时，
transform是必须的；只靠top/left会偏移一半自身尺寸 - 在
width: 100vw或height: 100vh的全屏容器里用它没问题；但在流式布局中，容易和媒体查询冲突
<img>。不同上下文下，text-align 可能被框架样式覆盖，flex 可能受祖先 display 影响，而 margin: 0 auto 在 inline 上根本不起作用——这些细节不验证，光抄代码就容易卡住。 
