首页 > 网页制作 >Bootstrap表格垂直居中div容器内

Bootstrap表格垂直居中div容器内

来源：互联网 2026-07-30 18:11:10

聊聊用 Bootstrap 做表格居中这件事儿。不少刚接触布局的朋友容易踩一个坑：想当然地把 vertical-align: middle 往 div 或 table 上一扔，以为就能垂直居中——结果发现根本不动。这个属性的生效范围其实很窄，只对行内元素或表格单元格有效，拿到块级容器上完全是个摆设。

聊聊用 Bootstrap 做表格居中这件事儿。不少刚接触布局的朋友容易踩一个坑：想当然地把 vertical-align: middle 往 div 或 table 上一扔，以为就能垂直居中——结果发现根本不动。这个属性的生效范围其实很窄，只对行内元素或表格单元格有效，拿到块级容器上完全是个摆设。

那实现 Bootstrap 表格垂直居中的可靠方案是什么？Flexbox。而 Bootstrap 4 和 5 已经把这套工具封装好了，直接拿来用就行，不用自己写额外 CSS。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

Bootstrap表格垂直居中div容器内

思路其实很清晰：把装表格的父容器变成 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

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 动态控制容器可见性，避免出现空白占位。

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

侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述