当前位置：首页 > 文章列表 > 文章 > 前端 > Bootstrap表格内容居中方法

Bootstrap表格内容居中方法

2026-01-07 13:09:47 0浏览收藏

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《Bootstrap 中如何居中表格内容》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

如何在 Bootstrap 中居中对齐包含表格的整个 div 内容

本文详解如何使用 Bootstrap 5 的 Flexbox 工具类（如 `justify-content-center`）精准居中包含标题、段落和表格的整块内容，解决因表格默认左对齐导致的布局偏移问题。

在 Bootstrap 布局中，当一个 .row 内部包含多个 .col-* 列（例如本例中的两个 col-md-6），且该行本身未设置对齐方式时，其子列会按文档流从左到右依次排列——即使父容器宽度足够，也不会自动水平居中。尤其当右侧列内含

元素时，由于

默认为块级元素且不继承父级文本对齐样式，容易造成视觉上“未居中”的错觉。

✅ 正确解法：为包裹内容的 .row 添加 justify-content-center 类
该类基于 CSS Flexbox 的 justify-content: center，使所有直接子列（.col-*）在主轴（水平方向）上整体居中对齐，而非仅对齐内部文字。



  
    
       
        Test Barbershop
        ...
      
       
        Opening hours
        Hours could change...

Monday	9:30 – 18:30
Tuesday	9:30 – 18:30

? 关键注意事项：

justify-content-center 必须作用于 *直接包裹 `.col-的.row`**，而非外层容器或嵌套更深的行；
避免混合使用 text-align: center（仅影响内联内容）与 Flex 居中，二者逻辑不同，易引发冲突；
表格本身无需额外居中（如 margin: 0 auto），因其已随所在列整体居中；若需微调表格内单元格对齐，可用 text-center（Bootstrap 5）或 text-align: center；
响应式安全：justify-content-center 在所有断点均生效；如需仅在特定屏幕尺寸居中，可使用响应式变体，如 justify-content-md-center（仅 ≥768px 居中）。

? 进阶提示：
若希望表格内容也统一右对齐时间列，可为添加 text-end 类（Bootstrap 5）或自定义 CSS：