display:table-cell 能让多行文本在固定高度容器中垂直居中，因其模拟表格单元格并原生支持 vertical-align:middle；需父容器设固定 height、display:table-cell 和 vertical-align:middle，且不兼容 IE6/7。
直接说结论：display:table-cell 能让多行文本在固定高度容器里垂直居中，但只适用于现代浏览器（IE8+、Chrome、Firefox），IE6/7 完全不支持，且会改变元素原本的块级行为。
为什么 display:table-cell 能垂直居中？
因为 vertical-align 只对表格单元格（table-cell）、行内元素或表格相关元素生效。把一个 div 设为 display:table-cell，就激活了它的 vertical-align:middle 能力——这和 HTML 表格里 <td valign="middle"> 是同一套机制。
<ul>
<li>必须同时设置父容器明确的 <code>height（比如 height:200px），否则 vertical-align 无参照基准
text-align:center 可额外加在同级元素上实现水平居中，不是必须但常用float）、绝对定位（position:absolute）混用，会冲突
display:table-cell 的典型写法和常见错误
最简可行结构是：外层容器设 display:table-cell + vertical-align:middle + 固定高度；内部直接放 p、span 等内容，无需额外 wrapper。
- 错误写法：
.container { display:block; vertical-align:middle; }→vertical-align在block下完全无效 - 错误写法：
.container { display:table-cell; }但没设height→ 高度由内容撑开，vertical-align失效 - 错误写法：给子元素（如
p）设display:table-cell→ 容器本身才是需要被“单元格化”的那个
正确示例：
立即学习“前端免费学习笔记（深入）”；
.box {
height: 150px;
display: table-cell;
vertical-align: middle;
text-align: center;
border: 1px solid #ccc;
}
对应 HTML：<div class="box"><p>第一行</p><p>第二行</p></div>
和 flex 布局比，display:table-cell 还值得用吗？
如果项目仍需兼容 IE8–9，它仍是少数可用方案之一；但若目标浏览器已是 Chrome/Firefox/Edge/IE11+，优先用 display:flex + align-items:center ——更简洁、语义清晰、无 display 类型污染。
-
display:table-cell会让元素失去margin、float等块级特性，后续样式调整容易踩坑 - 嵌套多层时，
table-cell的继承行为不如 flex 可预测 - 响应式场景下，
table-cell对min-height、max-height支持不稳定，flex 更可靠
真正要注意的是：别把它当成“万能垂直居中解”，它本质是借用了表格渲染逻辑，适用边界很窄——仅限父容器高度确定、且不需要复杂布局干预的简单文本容器。
