如何在div中垂直居中表格？vertical-align方法无效求解决方案

问题分析 #

你使用的vertical-align: middle属性在这里无效，原因是该属性仅对行内元素、表格单元格生效，而你的结构采用了Bootstrap的flex布局（d-flex）和块级容器，这个属性无法实现垂直对齐效果。另外你设置的height: 100%如果父元素没有明确高度，也不会生效，导致滚动容器的高度不符合预期。

修复步骤及代码 #

要让表格置于容器起始位置（顶部对齐），可以按以下方式修改代码：

1. 移除所有无效的vertical-align: middle样式；
2. 给包裹滚动容器的父元素添加Bootstrap flex对齐类，确保内容顶部对齐；
3. 给滚动容器设置明确高度（或让父容器具备明确高度），保证滚动功能正常。

修改后的代码：

<div class="col-12 d-flex">
    <div class="col-6 text-center default_color" style="padding-top: 5rem;">
        <div class="row">
            <div class="col-12" *ngIf="!incompleteDataForTables">
                <b style="color:var(--select-bg-color)">Variación entre semanas sites </b>
                <!-- 添加flex类实现顶部对齐，同时设置容器高度 -->
                <div class="col-12 d-flex align-items-start" style="height: calc(100vh - 10rem);">
                    <div class="table-responsive m-2 p-1 w-100" style="overflow-y: scroll;">
                        <table id="data_week_comp_3500">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

关键说明 #

• d-flex align-items-start：Bootstrap内置的flex布局类，让容器内的内容沿垂直方向顶部对齐，比自定义样式更适配Bootstrap体系；
• height: calc(100vh - 10rem)：通过计算设置容器高度，减去顶部的padding-top:5rem和其他间距，你可以根据页面实际布局调整这个值；
• w-100：确保滚动容器占满父容器的宽度，避免出现宽度适配问题；
• 表格在table-responsive容器内默认就是顶部对齐，只要滚动容器高度正常，表格就会从容器起始位置开始排列。

内容的提问来源于stack exchange，提问作者crist_9