line-height 设置过大是文字重叠的最常见原因：值远超容器高度或字体行高时会导致多行文本视觉挤叠，尤其响应式下 font-size 缩放而 line-height 未同步；应仅对单行固定高容器使用且值等于 height，避免无单位数值、子元素叠加、flex 或 table-cell 布局混用。
line-height 设得太大导致文字重叠
这是最常见原因：当用 line-height 实现单行垂直居中时，如果值远超容器高度或字体实际行高，多行文本会因行距过大而视觉上“挤”在一起，甚至上下文字重叠。尤其在响应式场景下，font-size 动态缩放但 line-height 没同步调整，就容易出问题。
解决办法很简单：
- 确认只对**单行、固定高容器**用
line-height，且值严格等于容器height - 避免用
line-height: 2这类无单位数值——它会继承并放大父级字体大小，造成不可控行高 - 若容器高度不固定（比如
min-height或内容撑开），直接放弃line-height方案 - 检查是否误给子元素（如
<span>）也设了line-height，造成叠加效应
flex 布局中 align-items: center 与 line-height 冲突
在按钮或 <div> 上同时写 display: flex 和 line-height，后者会被忽略或干扰 flex 的基线计算，尤其当文字换行后，align-items: center 可能把首行拉到顶部，次行压到底部，视觉上像重叠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只要用了
display: flex，就删掉所有line-height相关声明 - 确保容器有明确高度（
height或min-height），否则align-items: center缺少参照基准，布局可能不稳定 - 如果按钮里含图标+文字，不要给文字单独设
vertical-align—— flex 下它无效，反而干扰对齐
table-cell 布局中 vertical-align 和 text-align 混用出错
display: table-cell + vertical-align: middle 看似稳妥，但一旦父容器没设 height，或子内容是未闭合的 <br>、空格、inline 元素嵌套过深，就会导致单元格高度塌陷，vertical-align 失效，文字堆叠在顶部。
注意点：
-
vertical-align只对display: table-cell或inline/inline-block元素生效，设在<div>上没用 - 必须给容器设明确
height，不能只靠内容撑开 - 避免在
table-cell内再嵌套 flex 或 grid —— display 类型冲突会导致渲染异常 - IE11 对
table-cell高度计算有 bug，若需兼容，优先用绝对定位 fallback
绝对定位 + transform 后文字被截断或错位
用 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) 居中时，如果容器没设 position: relative，元素会相对视口定位，一旦页面滚动，文字就飘走；更隐蔽的问题是：当文字内容动态变化（比如 i18n 多语言长度不同），transform 仍按旧尺寸回拉，导致偏移不准，看起来像重叠或贴边。
关键检查项：
- 父容器必须有
position: relative，否则top/left会向上找最近的定位祖先，甚至落到<body> - 不要给居中元素设
margin: auto—— 绝对定位下它不起作用，还可能干扰计算 - 若文字长度波动大（如按钮文案从 “提交” 变成 “请确认您的邮箱地址”），这个方案不如 flex 稳定
- Safari 旧版本对
transform的 subpixel 渲染不一致，偶尔出现 1px 错位，肉眼看起来像重叠
真正麻烦的不是选哪种方法，而是混用——比如 flex 里塞 line-height，或者 table-cell 外层又套 absolute。居中逻辑一旦叠加，浏览器渲染优先级就乱了。盯住一个方案，删干净冗余样式，比补十个 hack 更有效。
