这是我在登录页面中使用 Material UI 的代码

*Material UI v5*

<Grid
  container
  spacing={0}
  direction="column"
  alignItems="center"
  justifyContent="center"
  sx={{ minHeight: '100vh' }}
>
  <Grid item xs={3}>
    <LoginForm />
  </Grid>
</Grid>

Material UI v4 及更低版本

<Grid
  container
  spacing={0}
  direction="column"
  alignItems="center"
  justify="center"
  style={{ minHeight: '100vh' }}
>
  <Grid item xs={3}>
    <LoginForm />
  </Grid>
</Grid>

这会使该登录表单位于屏幕的中央。

但是，IE 仍然不支持 Material-UI Grid，您会在 IE 中看到一些放错位置的内容。

正如@max所指出的，另一种选择是，

<Grid container justifyContent="center">
  <Your centered component/>
</Grid>

请注意，Material UI v4 及以下版本应改用 justify=”center”。

但是，使用没有 Grid 项目的 Grid 容器是未记录的行为。

除此之外，另一种新的、更好的方法是使用组件Box。

<Box
  display="flex"
  justifyContent="center"
  alignItems="center"
  minHeight="100vh"
>
  <YourComponent/>
</Box>

这最初是由 Killian Huyghe 作为另一个答案发布的。