Sometimes, we want to horizontally center an item in React Material UI Grid item.

In this article, we’ll look at how to horizontally center an item in React Material UI Grid item.

How to horizontally center an item in React Material UI Grid item?

To horizontally center an item in React Material UI Grid item, we can use flexbox to justify and align the content in the center position.

For instance, we write:

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

export default function App() {
  return (
    <div>
      <Grid container align="center" justify="center" alignItems="center">
        <Grid item xs={false} sm={4} md={6}>
          foo
        </Grid>
        <Grid item xs={12} sm={4} md={6}>
          bar
        </Grid>
      </Grid>
    </div>
  );
}

We add the container prop to the outer Grid to make it a flex container.

We set the align prop to 'center' to center align items vertically.

And we set the justify prop to 'center' to center items horizontally.

Then we add Grids inside the outer Grid to add content into the container Grid.

Conclusion

To horizontally center an item in React Material UI Grid item, we can use flexbox to justify and align the content in the center position.