Material ui 材质UI网格对齐

如何在材质UI中垂直对齐项目？

这里我想把

Start

元素放在顶部，

Center

元素放在中间，

End

元素放在底部

---

我正在寻找最清晰、最好的解决方案，如果您使用网格，请执行以下操作：

     <Grid
        container
        direction="column"
        justify="center"
        alignItems="center"
        spacing={3}
        className={classes.container}
      >

您可以使用MUI doc的互动工具进行游戏，并获得您必须通过的道具，以便在将来创建所需的所有布局。

---

以下是代码，它将使三个网格（开始、中心和结束）依次显示在一列中。此布局在所有屏幕分辨率/断点上保持不变

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
    border: '2px solid #969292',
  }
 
}));

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

  return (
    <div className={classes.root}>
      <Grid>
        <Grid item xs={12}>
          <Paper className={classes.paper}>Start</Paper>
        </Grid>
        <Grid item item xs={12}>
          <Paper className={classes.paper}>Center</Paper>
        </Grid>
        <Grid item item xs={12}>
          <Paper className={classes.paper}>End</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Grid”导入网格；
const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1，
},
论文：{
填充：主题。间距（2），
textAlign:'中心'，
颜色：theme.palete.text.secondary，
边框：'2px实心#969292'，
}
}));
导出默认函数CenteredGrid（）{
const classes=useStyles（）；
返回(
开始
居中
终点
);
}

此代码将生成如下布局：