我尝试在不使用 Flexbox 的情况下垂直对齐内容，因为我们的用例存在一些问题，所以我尝试使用垂直对齐的表格来实现，但问题是里面的内容没有填充剩余的高度，是否可以通过CSS以某种方式做到这一点？
https://jsfiddle.net/s38haqm5/25/
1
998<html>
<body>
<div class="row">
<div class="cell">
<div class="container">
Hello world
</div>
</div>
<div class="cella">
Cell2
</div>
</div>
</body>
</html>
.container {
background-color: red;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
border: 1px solid black;
min-width: 100px;
max-width: 100px;
min-height: auto;
max-height: none;
}
.cella {
display: table-cell;
vertical-align: middle;
border: 1px solid black;
min-width: 100px;
max-width: 100px;
height: 30px;
max-height: none;
}
.row {
display: table
} 
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
您需要定义父级高度。现在您的
.cell没有设置任何高度，因此.container没有任何值来计算 100%。 只需向.cell添加一些高度，例如.cell {height: 30px;}（就像您在.cella上的高度一样。）由于
.cella和.cell相同，我假设您可能需要这一点建议。 如果您希望单元格相同，但其中一个单元格需要设置不同的样式，请在所有单元格上添加相同的类，然后将 id 添加到需要不同的单元格，然后根据您的需要设置 id 的样式想。请记住，具有 class 和 id 的单元格将具有由 class 和 id 组合而成的 css 值