margin: 0 auto对<img>无效，因其默认为行内元素，必须设display: block且有明确宽度；text-align: center须作用于父容器；Flex居中需父容器display: flex并设justify-content和align-items，且高度不可塌陷。
为什么margin: 0 auto对<img>完全没反应
根本不是 CSS 写错了，而是<img>默认是行内元素，margin: 0 auto对它压根不生效。浏览器只给块级元素分配“自动外边距”，行内元素直接忽略。
- 必须显式加
display: block或display: inline-block - 图片还得有可计算宽度：
width: 300px可行，但max-width: 100%不行——浏览器无法据此算出“剩余空间” - 父容器不能是
display: flex或display: grid，否则会接管 margin 行为 - 别同时设
float或position: absolute，元素一脱离文档流，margin: auto就彻底失效
text-align: center写在哪才管用
这个属性必须作用于父容器（比如<div>），写在<img>标签上完全无效。它只影响父容器内的行内级子元素，而<img>默认就是行内，所以天然适配。
- 父容器若用了
float、position: absolute或display: inline-block，text-align会被静默忽略 - 父容器宽度不能塌缩：如果里面只有图片且没其他内容，它可能宽为 0，导致居中基准丢失
- 它只管水平方向；垂直方向仍贴顶，需靠
line-height、padding或外层 flex 容器配合 - 混排时注意：
<div>这类块级子元素不受text-align影响，可能把图片挤偏
Flex 布局里justify-content: center和align-items: center为啥不生效
这两个声明必须同时加在父容器上，且缺一不可。但真正让它们“动起来”的，是父容器自身的高度约束——没有高度，align-items: center就等于让图片在 0px 高的空间里居中。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器必须设
display: flex，只给<img>加没用 - 必须有明确高度参照：
height: 100vh或min-height: 300px；height: 100%在无显式父高时无效 - 图片不能加
float或position: absolute，否则脱离 flex 流，对齐规则自动失效 - 别直接在
<body>上设display: flex，会把所有直系子元素（如多个<p>）都变成 flex item，布局全乱
响应式切换对齐方式时最容易踩的坑
媒体查询的目标不是反复重写img的尺寸，而是控制父容器的对齐行为本身。图片尺寸靠max-width和height: auto一次搞定，对齐则交给父容器的text-align或justify-content。
立即学习“前端免费学习笔记（深入）”；
- 错误做法：每个断点都写
img { width: 100% }——冗余、易冲突、维护难 - 正确做法：小屏用
@media (max-width: 768px) { .img-container { text-align: center; } }，大屏换justify-content: flex-end - 如果父容器用了
float或position: fixed，媒体查询里的justify-content会静默失效 - 移动端偏移常因
<meta name="viewport">缺失或box-sizing未设border-box，导致 padding 干扰实际宽度
display、height和position三项，比反复调img的 margin 更快定位问题。 
