text-align + line-height 组合仅适用于单行文本垂直居中，配合 text-overflow: ellipsis 时需确保 line-height 等于容器高度、white-space: nowrap 存在且无干扰 padding；flex 居中更鲁棒，绝对定位需注意 overflow 设置位置与 transform 配合。
text-align + line-height 组合只对单行有效
单行文本加 text-overflow: ellipsis 时，text-align: center 依然管用，但必须配合固定高度和 line-height 才能垂直居中。否则文字会贴顶或下沉。
常见错误现象：overflow: hidden 加了，text-overflow: ellipsis 也写了，但文字明显偏上——问题出在没设 line-height 或它不等于容器高度。
-
white-space: nowrap必须存在，否则换行会破坏单行前提 -
line-height值要和父容器height相等（比如都是40px），不能靠继承或计算值 - 如果父容器用了
font-size: 1.2em这类相对单位，line-height也得用相同基准，否则实际像素值会漂移 - 避免给文字容器设
padding，否则height和line-height对不上，垂直位置就偏了
flex 居中兼容 overflow: hidden 场景
当单行文本同时要溢出隐藏+水平垂直居中，display: flex 是更鲁棒的选择，它不依赖 line-height，也不怕字体缩放影响。
关键点在于：子元素（比如 <span></span>）必须是块级或 inline-block，否则 justify-content 和 align-items 对它无效。
- 父容器设
display: flex; justify-content: center; align-items: center; height: 40px; - 子元素加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 子元素需显式设
display: block或display: inline-block（默认span是 inline，不响应align-items） - 不要给子元素设
width: 100%，否则它会撑满并失去text-overflow效果
绝对定位 + transform 容易漏掉的细节
用 position: absolute 居中单行溢出文本，看似绕开布局限制，但几个条件缺一不可，漏一个就偏。
典型错误：文字居中了，但省略号不见了——其实是 transform 挤压了内容区域，或者 overflow 被父容器截断了。
- 父容器必须有
position: relative，否则top: 50%会相对于视口计算 - 子元素设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);，三者缺一不可 -
overflow: hidden必须加在父容器上，不是子元素上；子元素加了反而可能切掉省略号 - 子元素宽度不能写死，要用
max-width: 100%配合white-space: nowrap，否则响应式下会失效
margin: auto 在这个场景下完全不适用
margin: 0 auto 只控制块级元素自身的水平位置，对内部文字的溢出行为毫无影响，而且和 text-overflow 搭配时极易出错。
常见误操作：给一个 div 设 margin: 0 auto; width: 200px;，再加 text-overflow: ellipsis——结果发现省略号不显示，或者文字在容器里左右晃动。
-
margin: 0 auto要求元素有明确width，但单行溢出文本往往需要自适应宽度，硬设会破坏响应性 - 该方案无法解决垂直居中问题，必须额外套一层或改用其他方式
- 如果父容器是
flex或grid，margin: auto会被忽略，行为不可控 - 真正需要的是内容居中，不是容器居中；把注意力放在文本渲染层，而不是外边距分配上
最麻烦的其实是字体度量差异：不同字体的 ascent/descent 不同，line-height 看似设对了，实际基线仍可能偏移。真要像素级对齐，得用 flex 或 grid，别碰 line-height 计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
