• 使用 Flex 布局:将父容器设置为 flex 布局,并将子元素设置为 align-items: center。
  • <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
      <Button type="primary">居中按钮</Button>
    </div>
    
  • 使用 Grid 布局:将父容器设置为 grid 布局,并将子元素设置为 align-self: center。
  • <div style={{display: 'grid', placeItems: 'center'}}>
      <Button type="primary">居中按钮</Button>
    </div>
    
  • 使用 margin 自动值:给父容器设置 text-align: center,并给子元素设置 margin: auto。
  • <div style={{textAlign: 'center'}}>
      <Button style={{margin: 'auto'}} type="primary">居中按钮</Button>
    </div>
    

    这些方法都可以使 antd 按钮居中。 您可以根据自己的需求和项目布局来选择最适合的方法。

  •