理论上，vertical-align 应该在带有 display:table-cell 的元素内工作。如果你添加一个带有 display:table 的包装器，它总是有效的。但是当它没有包装器时，有时它会起作用，有时 vertical-align 会被完全忽略，这似乎是随机的。您能否解释一下 table-cell 支持垂直对齐的要求是什么？
最佳答案
这有点推测，但在没有任何例子的情况下，我将在黑暗中试一试。也许你的意思是这样的:
<!DOCTYPE html>
<title>Test case</title>
<style>
.wrapper { height: 80px; width:100%; }
.percentage .wrapper { border: 1px solid red; }
.fixed .wrapper { border: 1px solid blue; }
.height-cells-test { margin-bottom: 20px; }
.as-block { display: block; }
.as-table { display: table; }
.cell { display:table-cell; vertical-align:middle; }
.percentage .cell { height: 100%; }
.fixed .cell { height: 80px; }
</style>
<div class="percentage height-cells-test">
<div class="wrapper as-block">
<div class="cell">
test percentage height of cell in block
</div>
</div>
<div class="wrapper as-table">
<div class="cell">
test percentage height of cell in table
</div>
</div>
</div>
<div class="fixed height-cells-test">
<div class="wrapper as-block">
<div class="cell">
test fixed height of cell in block
</div>
</div>
<div class="wrapper as-table">
<div class="cell">
test fixed height of cell in table
</div>
</div>
</div>
如果您在 jsfiddle 中查看此内容, 你会看到四个 .wrapper block ，第二个、第三个和第四个 block 的文本垂直居中，第一个 block 中的文本显示在顶部。
这种情况是在 display:block 中使用单元格的百分比高度时容器。
要了解为什么会发生这种情况，请参阅 the CSS 2.1 spec 中的这段文字:
Document languages other than HTML may not contain all the elements in the CSS 2.1 table model. In these cases, the "missing" elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element. Missing elements generate anonymous objects ...
这有点误导，因为它首先讨论将 CSS 与 HTML 以外的语言一起使用，但它的意思是在不使用 <table>, <tr>, <td> 的情况下使用 css 表格样式。等所以它也适用于这里display:table-cell正在使用中。
该规范继续提供有关如何创建这些匿名对象的详细规则(此处未复制)。结果是，对于 block 包装器内的表格单元格，围绕表格单元格生成匿名表格和匿名表格行。
我们可以忽略匿名表行，因为这不会影响这里的情况。
不过匿名表很重要。这个对象有它自己的高度，作为一个表格，只要它的内容需要那么高。当表格单元格被告知为 100% 高度时，这意味着 匿名表格 的高度为 100%，而不是 .wrapper 高度的 100% .
所以 table 很小，放在.wrapper的左上角，表格单元格位于其中。垂直对齐仍在发生，但在一个不比文本大的框中，因此文本无处可去。
当 .wrapper block 的样式为 display:table ，不需要匿名表对象，也不会生成。所以表格单元格与 .wrapper 一样高和 vertical-align:middle可以在整个空间内生效。
关于html - 垂直对齐什么时候在表格单元格中起作用，什么时候不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15445373/