React-Bootstrap中如何让列表组内的块级按钮居中显示

默认状态下React-Bootstrap的List Group（列表组）内的块级按钮会默认左对齐，可直接使用Bootstrap内置工具类实现居中效果，无需编写额外自定义样式，推荐两种常用实现方案：

方案1：给列表项设置Flex布局居中（最推荐） #

直接给包裹按钮的ListGroup.Item添加flex布局+水平居中的工具类，不破坏按钮本身的交互属性，适配性最好：

import { ListGroup, Button } from 'react-bootstrap';

export default function DemoList() {
  return (
    <ListGroup>
      {/* 核心是给ListGroup.Item加d-flex justify-content-center类 */}
      <ListGroup.Item className="d-flex justify-content-center py-3">
        {/* 不要给按钮加w-100，按需设置宽度即可，比如w-75代表占父容器75%宽度 */}
        <Button variant="primary" className="w-75">
          目标操作按钮
        </Button>
      </ListGroup.Item>
    </ListGroup>
  );
}

方案2：给按钮本身加自动外边距实现居中 #

如果不想修改列表项的布局模式，可直接给按钮添加块级展示+水平自动外边距类实现居中：

<ListGroup>
  <ListGroup.Item className="py-3">
    {/* 核心类：mx-auto 左右外边距自动，d-block 块级展示，配合自定义宽度 */}
    <Button variant="outline-primary" className="d-block mx-auto w-60">
      目标操作按钮
    </Button>
  </ListGroup.Item>
</ListGroup>

关键注意点：块级按钮默认自带w-100样式占满父容器全部宽度，此时按钮和父容器宽度一致不会有居中视觉差，必须先调整按钮宽度（可通过w-*百分比类、max-width自定义宽度值设置），再搭配居中类才能看到预期效果。

涉及的Bootstrap内置工具类说明 #

• d-flex：将元素设置为弹性布局容器
• justify-content-center：弹性布局容器内的子元素沿水平方向居中排列
• d-block：将元素设置为块级展示模式
• mx-auto：为块级元素设置左右自动外边距，是Bootstrap原生的块元素水平居中方案
• py-3：可选配置，给列表项加上下内边距，避免按钮贴边导致视觉效果拥挤

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