Solution

To align center ant design button in react js, first install ant design library using npm install antd command import and use button component from it. We have used style attribute to set align center in it

Snippet

In this snippet, see the short example to use button component of ant design library, with the use css style component display of flex, justifyContent of center, and alignitems of center. Then we will show you in button center.

<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
 <Button type="primary">Button</Button>
</div>

Example

In this example, we will import the button component from the ant library. use the <div> element and with display of flex, justifyContent of center, and alignitems of center button component as a primary type of ant design library.

Let’s start coding…

App.js

import { Button } from 'antd';

export default function App() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <Button type="primary">Button</Button>
    </div>
  );
}

Output

Ant-design, button

Here, we are provided code sandbox links for the above program align center ant design button. Then you can use whenever you went and do the changes as per your requirements.

codesandbox

Happy Coding,

I hope the above example with help you to do your task.