line-height = height 仅在height明确、内容单行、无padding/border干扰时可靠；若容器有padding，line-height须等于内容区高度（如height:40px;padding:8px→line-height:24px），否则文字偏移或截断。
line-height 是最轻量、也最容易翻车的单行垂直居中方案——它只在三个条件同时满足时才可靠：容器 height 明确（非 auto）、内容确定为单行、且无干扰性的 padding 或 border。
为什么 line-height = height 有时没反应
常见错误是直接给父容器设 height: 40px 和 line-height: 40px，但容器本身有 padding: 8px。此时内容区实际高度只剩 24px，line-height: 40px 就会把文字“顶出”或截断，而不是居中。
- 检查 computed styles，确认最终内容区高度是否真等于你设的
line-height - 若用了
box-sizing: border-box，padding已计入总高，line-height应匹配内容区高度，不是总高 -
display: flex会完全忽略line-height，因为align-items优先级更高
td 和 button 这类替换元素怎么用 line-height
表格单元格和表单控件属于“替换元素”，它们对 line-height 的响应更稳定，但仍有细节差异：
-
td：设height: 40px+line-height: 40px+vertical-align: middle是安全组合；若加了padding，line-height必须减去上下 padding 值 -
button：默认有内边距，建议先重置padding: 0，再设height和line-height，否则容易撑高 -
input[type="text"]不响应line-height（除非是textarea），得靠padding或flex对齐
什么时候该放弃 line-height 改用其他方式
以下情况 line-height 不再适用，硬套反而增加调试成本：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 容器内容可能换行（如长文本自动折行）
- 需要兼容 IE9 及更早版本（部分场景下
line-height渲染不一致） - 父容器用了
display: flex或display: grid - 要同时控制水平+垂直居中，且容器宽高不固定
此时直接上 display: flex; align-items: center; justify-content: center 更省心，尤其现代项目里几乎无兼容负担。
真正容易被忽略的是：单行居中从来不是“设一个值就完事”，而是要同步确认内容区高度来源——是 height？padding？还是 font-size × line-height 的乘积？漏掉任意一环，line-height 就会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
