display:table-cell必须配合display:table容器使用，因浏览器仅在完整表格语义（table→table-cell）下识别vertical-align；父级无display:table则退化为block，vertical-align失效；且需明确高度、避免换行干扰、禁用float与width。
display:table-cell 能实现垂直居中，但有严格前提：它必须配合 display:table 容器使用，且对父级高度、换行、内联元素等敏感——直接套用常导致失效或布局错乱。
为什么 display:table-cell 必须配 display:table
浏览器只识别完整的表格模型语义：table-cell 不是独立布局模式，它依赖父元素声明为 table（或 table-row），否则会退化为普通块级行为，vertical-align 失效。
- 错误写法：
div { display: table-cell; vertical-align: middle; }—— 父容器没设display: table，vertical-align被忽略 - 正确结构：外层
div设display: table，内层div设display: table-cell，再加vertical-align: middle - 注意：不能把
table-cell直接用在body或html上，它们不是表格上下文
多行文本换行与高度控制的关键点
多行文本要撑开容器并居中，需确保内容能自然换行，且容器有明确高度（height 或 min-height），否则 table-cell 会收缩到内容高度，失去“居中”意义。
- 必须设置父容器（
table层）的height，例如height: 200px；仅用min-height不够稳定 - 文本容器（
table-cell层）需允许换行：white-space: normal（默认值，但显式声明更安全） - 避免给
table-cell设width或float，会破坏表格布局流 - 如果文本含
inline-block元素，可能干扰基线对齐，优先用纯文本或span
兼容性与现代替代方案的取舍
display:table-cell 在 IE8+ 完全支持，但 Flexbox 和 Grid 更简洁可靠；若项目需兼容旧版 IE，它仍是稳妥选择，但要注意副作用。
- 副作用：整个容器变成表格模型，
margin失效（需用padding或嵌套 wrapper 控制间距） - Flexbox 替代写法更轻量：
display: flex; align-items: center; justify-content: center;，但 IE10 以下不支持 - 不要混用：同时写
display: table-cell和display: flex会导致后者被覆盖，浏览器按 CSS 顺序解析 - 调试时检查 computed styles：确认
display确实是table-cell，而非被其他规则重置为block
真正卡住的地方往往不是语法写错，而是父容器没设高度、没声明 table、或文本被 white-space: nowrap 锁死——先盯住这三点，比反复调 vertical-align 有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
