text-align: center仅对块级容器内的行内内容生效；块级子元素需用margin: 0 auto或Flex布局；line-height仅适用于固定单行文本垂直居中；vertical-align不适用于块级元素居中；Flex布局是现代水平+垂直居中的首选方案。
text-align: center 只对行内内容生效
很多人加了 text-align: center 发现文字没居中，其实是忘了它只作用于**块级容器里的行内级内容**。如果盒子本身是 display: block（默认），里面放的是普通文字或 span，那它管用；但要是里面塞了个 div、button 或其他块级元素，text-align 就完全无效。
常见错误现象：
— 盒子设置了 text-align: center，但内部 div 还是靠左
— 文字在 Firefox 里居中，Chrome 里偏移（其实是盒模型或字体渲染差异，不是 text-align 问题）
- 确保目标文字是直接子节点，或父容器是行内上下文（比如
display: inline-block） - 若内部是块级元素，改用
margin: 0 auto（需设宽度）或 Flex 布局 -
text-align不影响垂直方向，别指望它把文字上下居中
line-height 实现单行垂直居中要小心高度陷阱
用 line-height 等于盒子高度来“撑”单行文字垂直居中，看似简单，实则脆弱。它依赖文字是纯单行、无换行、无 padding 干扰，且对多语言字体（如中英文混排）的基线表现不一致。
使用场景：
— 标题栏、按钮、标签等高度固定、内容确定为单行的控件
- 盒子必须有明确的
height，且line-height值严格等于该高度 - 避免同时设置
padding，否则实际高度溢出，文字会下移 - 遇到
font-size动态变化（如响应式）时，line-height得同步重算，不易维护 - 多行文字下，
line-height会变成行间距，不是居中手段
Flex 布局才是现代方案的默认选择
当需要真正可靠的水平+垂直居中，尤其面对动态内容、未知行数或响应式需求时，display: flex 是目前最直接、兼容性足够（IE11+）的解法。它不依赖文字类型、不耦合高度值，也不怕换行。
实操建议：
- 给容器加
display: flex、justify-content: center（水平）、align-items: center（垂直） - 无需设
height，也无需担心line-height冲突 - 若内容是多行段落，
align-items: center仍能整体居中，而line-height会失效 - 注意 IE11 对
flex的部分属性支持不全（如align-content），但基础居中没问题
示例：
div.box {<br> display: flex;<br> justify-content: center;<br> align-items: center;<br> height: 80px;<br>}
vertical-align 不是用来居中容器内文字的
这是最容易混淆的一点：vertical-align 只对**行内级元素或表格单元格**生效，且它的参考系是当前行框（line box）的基线，不是父容器边界。给一个 div 设 vertical-align: middle 完全没效果。
常见错误现象：
— 在 div 上写 vertical-align: middle，控制台没报错但毫无反应
— 把它和 line-height 混用，结果文字位置更飘忽
-
vertical-align适合调整个别img、input在行内的对齐，比如让图标和文字平齐 - 想让整个块居中？回到 Flex 或 Grid
- 表格中可用
vertical-align: middle作用于td，但那是表格布局语义，不是通用居中方案
CSS 居中看着简单，真正卡住人的往往不是“会不会”，而是“为什么这个方式在某个场景突然不灵”。尤其是 line-height 和 vertical-align 这两个老朋友，它们的生效条件比表面看起来苛刻得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
