单行文本用line-height配合height能快速居中，但仅在固定高度且不换行时可靠；一旦内容动态、容器自适应或文字超宽，就会失效甚至裁剪内容。
单行文本用 line-height 配合 height 能快速居中，但只在「固定高度 + 不换行」时真正可靠；一旦内容动态、容器自适应或文字超宽，它就会失效甚至裁剪内容。
line-height = height 为什么只对单行有效
浏览器把 line-height 当作“行框高度”，当文本只有一行时，整行被撑满容器高度，视觉上就居中了。但这个机制不处理换行——第二行会从第一行底部继续往下排，不会重新居中。
-
line-height必须和容器的height数值与单位完全一致（比如都是60px），差 1px 都可能偏移 - 如果容器有
padding，height应该是内容区高度（即总高减去上下padding），否则文字会被挤出或截断 -
overflow: hidden建议加上，防止意外换行后内容溢出不可见 - 别给文本加
vertical-align: middle——div默认是display: block，这个属性直接被忽略
多行或动态高度时 line-height 会出什么问题
常见错误现象：文字堆叠、顶部贴边、底部留白过大、部分文字被裁剪。根本原因是 line-height 控制的是每行内部基线间距，不是整个文本块在容器中的位置。
- 设
line-height: 20px+height: 100px，5 行文本总高度约 100px，但首行顶边紧贴容器顶，末行底边紧贴容器底，整体并不居中 - 响应式场景下，容器宽度变化导致文字自动换行，
line-height立刻失去垂直控制能力 - 字体大小缩放（如用户设置系统字号）或使用
em/rem单位时，line-height和height很难保持严格同步
想兼容老浏览器又不用 JS，还有没有折中方案
有，但代价明确：用绝对定位 + transform，比 flex 兼容性好（支持 IE9+），但需要父容器有明确 position: relative，且子元素必须是块级或行内块。
- 父容器加
position: relative，子元素加position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 子元素不能是纯文本节点，得包一层
<span></span>或<p></p>，否则transform对纯文本无效 - IE9 支持
transform，但不支持transform: translate(-50%, -50%)的百分比参数，需用-ms-transform前缀并配合top/left手动微调 - 这个方案对 flex 容器里的子元素可能冲突，尤其当父容器同时设了
align-items和绝对定位时
真正容易被忽略的点是：很多开发者以为只要 line-height 和 height 数值一样就万事大吉，却没检查容器是否带 padding、字体是否启用系统缩放、或者 CSS 重置是否清掉了默认 margin 导致实际高度偏差。这些细节一出错，居中就偏几像素——肉眼难察觉，但设计稿一对就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
