text-align: center 仅对行内内容有效，不能居中块级元素；line-height 垂直居中仅适用于严格单行、固定字号与高度的场景，现代开发应优先使用 flex 或 grid。
text-align: center 只对行内内容有效
很多人以为 text-align: center 能让任意元素“居中”，结果给一个 div 加了它，里面放个块级 button 或 img 却纹丝不动。这是因为 text-align 本质是控制**行内内容在行框内的水平对齐方式**，不是控制子元素的定位。
常见错误现象：
• 块级子元素（如 div、p）没反应
• 图片没居中，但图片右侧的文字却居中了
• Flex 容器里误加 text-align，干扰预期布局
- 适用场景：纯文本、
span、img（作为行内元素时）、input等自然行内或可设为display: inline的元素 - 若想居中块级子元素，要么把它设为
display: inline-block，要么换用flex或grid -
text-align对textarea和select的内部文字有效，但不影响其自身位置
line-height 实现单行文本垂直居中要谨慎
用 line-height 等于容器高度来“垂直居中”单行文本，看似简单，实则限制极多——它只在**严格单行、无换行、字体大小固定、行高不被继承干扰**时才可靠。
常见错误现象：
• 文字多了自动换行，整个跑出容器
• 字体用了 rem 或 em，line-height 计算失准
• 父元素设置了 font-size: 0（常用于清除 inline-block 间隙），导致子元素文字消失
- 必须确保容器高度明确（如
height: 40px），且line-height值与之相等 - 不能和
vertical-align混用（比如父容器是inline-block时，vertical-align: middle才真正起作用） - 响应式场景下几乎不可用：屏幕变小 → 字号缩放 →
line-height失效 - 示例：
.box { height: 32px; line-height: 32px; font-size: 14px; }
text-align + line-height 组合只适用于「单行行内内容」
这两个属性能一起起效的唯一合理场景，就是容器内只有一段不会折行的行内内容，比如按钮文字、导航链接、图标+文字组合（且整体设为 inline-block）。
使用场景举例：
• 导航栏中的 a 标签（默认行内）
• 小尺寸卡片标题（限制字数 + 强制 white-space: nowrap）
• 表单控件旁的标签文字
- 务必加
white-space: nowrap防止意外换行 - 若内容含
img，需确认其vertical-align是middle或baseline，否则图文错位 - 不要对包含
input、textarea的容器滥用该组合——它们的垂直对齐逻辑独立于line-height - 兼容性没问题，但语义上属于“取巧”，现代项目更推荐
display: flex
为什么现在不该优先用这组方案
不是它们错了，而是约束太硬、扩展性太差。一旦需求从“单行”变成“最多两行”，从“固定高”变成“内容自适应高”，或需要支持 RTL、动态字号、无障碍读屏，这套组合就立刻崩解。
性能影响虽小，但维护成本高：
• 每次改字体大小都要同步调 line-height
• 每次加新内容都要检查是否溢出
• 同一组件在不同设备上表现不一致
- 真正可靠的居中方案是
display: flex（justify-content: center; align-items: center）或display: grid（place-items: center） - 如果必须兼容 IE10/11，
flex仍比line-height+text-align更可控、更可测 - 最易被忽略的一点：当父容器用了
transform: translateZ(0)或will-change触发硬件加速时，line-height垂直居中可能在某些 Chrome 版本中出现 1px 偏移
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
