vertical-align: middle单独无效是因为它只对table-cell、inline等特定display类型生效，普通block元素忽略该属性；必须配合display: table-cell和height（或min-height）才能实现多行文本垂直居中。
固定高度容器里多行文本垂直居中，display: table-cell 是最直接有效的方案，但必须配合 height 和 vertical-align: middle 才生效，缺一不可。
为什么 vertical-align: middle 单独写没用？
vertical-align 只对表格单元格、行内元素或表格相关显示类型起作用。普通 div 默认是 display: block，此时 vertical-align 完全被忽略。
- 错误写法：
.box { display: block; vertical-align: middle; }→ 无效 - 正确前提：先让容器“变成单元格”，即设
display: table-cell - 注意：
display: table-cell会覆盖原有盒模型行为，比如margin失效、不能和float或position: absolute共存
display: table-cell 必须配 height 吗？
是的。没有明确 height，容器高度由内容撑开，vertical-align: middle 就失去参照基准，实际效果等同于顶部对齐。
- 有效写法：
.box { height: 120px; display: table-cell; vertical-align: middle; } - 无效写法：
.box { display: table-cell; vertical-align: middle; }（无 height）→ 文本仍靠上 - 若需响应式高度，可用
min-height+padding替代，但此时已不属于table-cell方案范畴
IE6/7 能用 display: table-cell 吗？
不能。IE6 和 IE7 完全不支持 display: table-cell，连带 vertical-align 在该上下文中也无效。如果项目仍需兼容这两个版本，只能退回 position: absolute + top: 50% + 负 margin-top（需知道内容高度）或 JS 动态计算。
- 现代浏览器（Chrome/Firefox/Safari/Edge/IE8+）均支持
- 移动端 iOS Safari、Android Chrome 全面支持，无兼容问题
- 别指望用
display: table-cell做降级兜底——它本身就不向下兼容
真正容易被忽略的点是：很多人以为只要写了 vertical-align: middle 就完事，却忘了 display 类型和 height 这两个硬性前提；而一旦用了 table-cell，又常在后续布局中误加 float 或 position，导致样式彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
