line-height设在父容器上对无效，因为作为内联元素按基线对齐，line-height仅撑高行框而不改变其对齐方式；需配合vertical-align或改用flex布局才能实现预期垂直居中。
line-height 设在父容器上为什么对 <img> 无效
因为 <img> 是内联元素，它参与行内格式化上下文（inline formatting context），其垂直位置由所在行框（line box）的基线（baseline）决定，而不是由父容器的 line-height 直接“推”动。父容器设了 line-height: 40px，只是撑高了整行高度，但 <img> 默认仍按 baseline 对齐——也就是底部留出 descender 空间（给 g、y 这类字母），结果看起来“浮起来”。
常见错误现象：div { line-height: 40px; } + <img src="icon.png">，图标始终偏上，调 margin-top 临时补救，换字体或缩放后立刻失效。
- 正确做法：把
line-height和vertical-align都作用在<img>的直接父级<td>、<code><span></span>或包裹<div> 上，且必须同时设置 <code>vertical-align: middle - 若父容器是
<div>，别只设 <code>line-height，要加display: inline-block或display: flex才能真正控制内部对齐逻辑 - 旧版 Safari（iOS 9.3 前）对
vertical-align: middle在非 table-cell 容器中行为不稳定，建议用vertical-align: top或直接切 flex - 想调按钮内文字垂直居中：用
line-height= 内容区高度（即height - padding-top - padding-bottom），或改用display: flex; align-items: center - 想让多个
<img>和<input>垂直对齐：统一父容器设display: flex; align-items: center，彻底绕过vertical-align的基线陷阱 - 表格里用
vertical-align: middle必须写在<td> 或 <code><th> 上，写在 <code><tr> 上无效<h3>响应式场景下 <code>line-height像素值 vs 无单位数值的取舍当字号随屏幕缩放动态变化（如用
rem或媒体查询），line-height: 24px会卡死不变，小屏时文字挤成一团；而line-height: 1.5虽能缩放，但在父容器高度固定时可能撑破布局，导致内容溢出或截断。- 纯文本单行按钮/标签：优先用无单位值（
line-height: 1.5），配合white-space: nowrap和overflow: hidden - 固定高度容器（如 40px 高导航栏）：用像素值（
line-height: 40px），但必须确保font-size不会超出内容区，否则文字会被裁剪 - 含图标+文字的按钮：放弃
line-height，改用display: flex; align-items: center; gap: 8px，图标和文字各自独立控制尺寸
Flex 布局替代方案里容易被忽略的交叉轴陷阱
写
display: flex; justify-content: center; align-items: center看似万能，但实际中常因父容器未显式定义高度或子元素触发最小尺寸限制，导致垂直居中“看起来没生效”。- 父容器若没设
height或没被内容撑开，align-items: center会按内容高度居中——也就是贴顶，不是你想要的视口居中 -
<img>默认max-width: 100%，在 flex 容器里可能被压缩变形；加flex-shrink: 0锁住尺寸 - 老版 Android WebView（Chrome 57 前）不支持
align-items: center在单行 flex 容器中对图片生效，稳妥写法是加min-height: 100vh或用place-items: center（Grid）降级兜底
真正麻烦的不是怎么写居中，而是判断当前环境里哪一层盒子在“偷偷撑高”或“塌陷”，然后一层层 inspect 计算 height、line-height、padding、border-box —— 这些才是调试时最耗时间的地方。
- 纯文本单行按钮/标签：优先用无单位值（
vertical-align 在不同 display 类型下的表现差异
vertical-align 只对 display: inline、inline-block、table-cell 元素生效；对 block 或 flex 子项完全无效。很多人给 <button></button> 写 vertical-align: middle，发现没反应——因为 button 默认是 inline-block，但它自身是容器，vertical-align 控制的是它在行内流中的位置，不是内部文字。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
