How to center a button in React Material UI?

Sometimes, we want to center a button in React Material UI.

In this article, we’ll look at how to center a button in React Material UI.

How to center a button in React Material UI?

To center a button in React Material UI, we can put the button in a Grid component.

And we set the justify prop of the Grid to 'center' and we set the container prop to true.

For instance, we write:

import * as React from "react";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";

export default function App() {
  return (
    <div>
      <Grid container justify="center">
        <Button color="primary" size="large" type="submit" variant="contained">
          Sign Up
        </Button>
      </Grid>
    </div>
  );
}

to add the Grid prop with the container and justify props.

We set justify to 'center' to center the items inside.

Next, we add the Button inside the Grid.

As a result, we should see that the Button is centered.

Conclusion

To center a button in React Material UI, we can put the button in a Grid component.

And we set the justify prop of the Grid to 'center' and we set the container prop to true.