如何将Bootstrap Vue表格单元格内的b-button居中显示？

你遇到的这个问题其实很常见，Bootstrap Vue的表格单元格（td）默认是table-cell布局，直接给按钮加margin:auto; display:block没生效，大概率是因为没正确利用Bootstrap的内置布局类，或者父元素的布局限制了按钮的居中行为。下面给你几个靠谱的解决方案：

方法1：使用Bootstrap文本居中类（最简单） #

Bootstrap自带text-center类，直接给按钮的父容器（也就是你代码里的<div>）加上这个类，就能让内部元素水平居中：

<template slot="iinstances" slot-scope="row">
  <div v-if="total_rows>0 && row.item.imProdInstDet!=''" class="text-center">
    <b-button :variant="'primary'" @click.stop="row.toggleDetails" class="mr-1">
      More Details
    </b-button>
  </div>
</template>

方法2：使用Flex布局类（更灵活，支持垂直居中） #

如果需要按钮在单元格里水平+垂直都居中，可以用Bootstrap的flex布局类，给父容器加上d-flex justify-content-center align-items-center，同时搭配h-100让容器高度匹配单元格：

<template slot="iinstances" slot-scope="row">
  <div v-if="total_rows>0 && row.item.imProdInstDet!=''" class="d-flex justify-content-center align-items-center h-100">
    <b-button :variant="'primary'" @click.stop="row.toggleDetails" class="mr-1">
      More Details
    </b-button>
  </div>
</template>

方法3：调整块级元素边距（适配你的原始思路） #

如果你坚持想用margin:auto的方式，需要确保按钮是块级元素，同时给父容器设置块级布局（覆盖表格单元格的默认布局限制）：

<template slot="iinstances" slot-scope="row">
  <div v-if="total_rows>0 && row.item.imProdInstDet!=''" class="d-block">
    <b-button style="display:block; margin:0 auto;" :variant="'primary'" @click.stop="row.toggleDetails" class="mr-1">
      More Details
    </b-button>
  </div>
</template>

为什么之前的方法没生效？ #

表格的<td>元素默认是display: table-cell，这种布局下直接给内部的inline-block元素（b-button默认是inline-block）加margin:auto不会生效——table-cell的水平对齐需要依赖text-align属性，或者通过flex布局来覆盖默认行为。而Bootstrap的内置类已经帮你处理了这些细节，所以用官方推荐的类会更稳定。

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