How to align material-ui Grid items vertically centered?

Question

I have a Grid container and Buttons as it's children (Grid-items). I want to align Grid-items vertically centered.

Here is the visual representation of my requirement

Here is the markup

<Box height="10vh" mr={4}>
  <Grid container justify="flex-end" spacing={2}>
    <Button variant="contained" color="default" type="reset">
      Reset
    </Button>
    <Button
      type="submit"
      variant="contained"
      color="primary"
      onClick={() => handleSubmit()}
    >
      Search
    </Button>
  </Grid>
</Box>;

Can anybody tell me a solution based on material-ui grid API?

Answer 1

I figured out, this should work,

const useStyles = makeStyles({
  grid: {
    height: "100%"
  }
});

export default function Hook() {
  const classes = useStyles();

  return (
    <Box height="10vh" mr={4}>
      <Grid
        className={classes.grid}
        container
        justify="flex-end"
        alignItems="center"
        spacing={2}
      >
        <Button variant="contained" color="default" type="reset">
          Reset
        </Button>
        <Button
          type="submit"
          variant="contained"
          color="primary"
          onClick={console.log}
        >
          Search
        </Button>
      </Grid>
    </Box>
  );
}

Working sandbox, https://codesandbox.io/s/material-demo-forked-m7fyj?file=/demo.js

Answer 2

<Grid
  container
  direction="row"
  justifyContent="flex-end"
  alignItems="center"
>

I recommend you to try the Interactive Demo

Answer 3

It look in MUI V5 like this:

<Grid
    container
    direction="row"
    justifyContent="center"
    alignItems="center"
>