聊聊如何用Bootstrap实现表格垂直居中。很多前端新手容易犯一个错误：想当然地把 vertical-align: middle 直接加在 div 或 table 上，以为就能垂直居中，结果发现毫无效果。这个属性的生效范围其实很窄，仅适用于行内元素或表格单元格，放到块级容器上完全不起作用。

那真正靠谱的解决方案是什么？Flexbox。Bootstrap 4 和 5 已经把这套工具封装好了，直接调用即可，无需额外编写CSS。

思路其实很简单：将包含表格的父容器设为 flex 容器，然后在主轴和交叉轴上同时做居中对齐。

具体需要哪几个类？

• d-flex：开启 flex 布局；
• align-items-center：沿交叉轴（默认垂直方向）居中子元素；
• justify-content-center：沿主轴（默认水平方向）居中子元素；
• 父容器必须设置高度 – 比如 height: 100vh 或固定值，否则 align-items-center 缺少计算基准，同样无效。

下面是一个可直接运行的完整示例，适用于 Angular 和 Bootstrap：

  

    

      

        
          Variación entre semanas sites
        
        
        

          

            

              

                

                  
Semana
                  
Sitio
                  
Variación (%)
                
              
              

                
Semana 1
Site A
+2.4
                
Semana 2
Site B
-1.7
              
            
          

        

      

    

  

主要改进了哪里

• 去掉了所有无效的 vertical-align: middle——对 div 和 table 纯属多余；
• 使用了 min-height: 300px（也可用 height: 100vh），让 flex 容器拥有明确的高度参照；
• d-flex 搭配 align-items-center 和 justify-content-center，同时实现垂直和水平居中，语义清晰且兼容 Bootstrap 4+；
• 保留了 .table-responsive 的横向滚动能力，内部设置 width: 100% 防止表格溢出；
• 增加了 table-sm 和 mb-0，让样式更紧凑、统一。

值得留意的几个地方

• 如果父容器高度由内容撑开（例如 height: auto），那么 align-items-center 会失效——必须给一个明确的高度。min-height 更安全，还能兼顾内容扩展；
• 避免嵌套多层没有设置高度的 flex 容器，否则容易导致高度塌陷；
• 在 Angular 场景下，如果表格数据是异步加载的，建议用 *ngIf 或 ngClass 动态控制容器可见性，避免出现空白占位。

掌握这个模式后，你会发现不仅表格，卡片、表单、图表容器……几乎所有块级元素都可以照此处理。这是响应式布局里非常基础又高频的技巧，值得收藏使用。