img设width:50%+margin:0 auto失效是因为默认inline不响应块级居中；须设display:block，父容器提供宽度上下文，再用margin:0 auto居中。
直接给 img 设 width: 50% 并加 margin: 0 auto 不生效，是因为它默认是行内元素，不响应块级居中逻辑；正确做法是先转为块级，再约束宽度、再居中。
为什么 width: 50% + margin: 0 auto 常常失效
常见错误是这样写：<img src="a.jpg" style="width: 50%; margin: 0 auto;">。但 img 默认是 display: inline，margin: 0 auto 对行内元素无效；即使设了百分比宽度，父容器若没明确宽度（比如未设 width 或 max-width），50% 也会按不可预期的基准计算。
- 必须显式设置
display: block，否则margin: 0 auto不起作用 - 父容器需有可计算的宽度上下文（如
width: 100%、max-width: 800px或flex容器） - 避免同时设
width和max-width: 100%—— 后者会被前者覆盖，失去响应性
width: 50% 配合居中的安全写法
适用于需要图片固定占父容器一半宽度、且水平居中的场景（比如卡片内图标、双图并列布局）。关键在三层控制：父容器提供宽度上下文，图片设块级+百分比宽+自动外边距。
- 父容器建议设
width: 100%或max-width: 600px，并margin: auto居中自身（如需整体居中） -
img样式应为：display: block; width: 50%; margin: 0 auto; - 若还需等比缩放（比如小屏下不想让 50% 宽度过大），可叠加
max-width: 100%，但注意：此时width: 50%只在父容器足够宽时生效，窄屏下会退化为max-width限制
示例：
<div style="max-width: 800px; margin: 20px auto;"> <img src="logo.png" style="display: block; width: 50%; margin: 0 auto;"> </div>
想居中又想响应式缩放？别只用 width
如果目标是“大屏下占 50%，小屏下自动缩小不溢出”，硬写 width: 50% 会卡死缩放行为。更合理的是放弃固定百分比宽度，改用 max-width + height: auto，再靠父容器控制实际占据比例。
立即学习“前端免费学习笔记（深入）”；
- 图片样式用：
max-width: 50vw; height: auto; display: block; margin: 0 auto;——50vw表示最多占视口宽度一半，随窗口缩放实时变化 - 或用弹性容器：父容器设
display: flex; justify-content: center;，图片只设max-width: 50%; height: auto;，flex 会自动居中且不限制高度 - 注意
vw单位在小屏下可能过小（比如30vw在 iPhone 上仅约 120px），可配合min-width保底，如min-width: 120px;
容易被忽略的兼容性细节
移动端 Safari 和旧版 Android WebView 对 vw 单位支持不稳定（尤其页面有地址栏滚动时），max-width: 50% 相对更稳，但前提是父容器宽度可靠。
- 确保父容器没有
float、position: absolute或display: inline-block等干扰块级流的行为 -
box-sizing: border-box推荐加在父容器上，避免padding导致实际内容区变窄，影响 50% 计算 - 如果图片用于语义化结构（如文章配图），优先用
max-width: 100%+height: auto，再通过媒体查询微调不同断点下的max-width值，比硬写width: 50%更健壮
真正难的不是怎么写那行 width: 50%，而是想清楚：这个“50%”到底该相对于谁？视口？父容器？还是设计稿标注？定错参照系，后面所有居中和缩放都会偏移。
