使用 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 按钮居中。 您可以根据自己的需求和项目布局来选择最适合的方法。