如何使 MUI 中的组件居中并使其响应？答案

【问题标题】：How to center a component in MUI and make it responsive?如何使 MUI 中的组件居中并使其响应？
【发布时间】：2018-11-18 20:55:42
【问题描述】：

我不太了解 React Material-UI 网格系统。如果我想使用表单组件进行登录，在所有设备（移动设备和桌面设备）的屏幕上居中的最简单方法是什么？

【问题讨论】：

标签： reactjs authentication mobile material-ui desktop

【解决方案1】：

因为您要在登录页面上使用它。这是我在使用 Material-UI 的登录页面中使用的代码

MUI v5

<Grid
  container
  spacing={0}
  direction="column"
  alignItems="center"
  justifyContent="center"
  style={{ minHeight: '100vh' }}
>

  <Grid item xs={3}>
   <LoginForm />
  </Grid>   
   
</Grid>

MUI 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>

请注意，MUIv4 及以下版本应使用 justify="center"。

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

希望这会对你有所帮助。

【讨论】：

稍微修正一下，对于Op的用例，flex方向应该是row>>> direction="row"
通常情况下， alignItems=center 和 justify=center 将组件放在页面的中心，但事实并非如此。添加 style={{ minHeight: '100vh' }} 可以完成这项工作，但它会在页面中添加一个滚动条。如何解决？
谢谢。经过几个小时或搜索，终于这是帮助我在同一行并排实现 FormLabel 和 TextField 的那个。
@Slim 设置 CSS 正文边距：0
它是 justifyContent="center" 而不是 MUI v5 中的 justify="center"

【解决方案2】：

另一种选择是：

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

【讨论】：

虽然这可行，但使用没有 Grid 项目的 Grid 容器是一种未记录的行为，并且可能随时中断（尽管它可能不会）。

【解决方案3】：

您可以使用 Box 组件来做到这一点：

import Box from "@material-ui/core/Box";

...

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

【讨论】：

这是我最喜欢的答案，技术不错

【解决方案4】：

这是另一个没有网格的选项：

<div
    style={{
        position: 'absolute', 
        left: '50%', 
        top: '50%',
        transform: 'translate(-50%, -50%)'
    }}
>
    <YourComponent/>
</div>

【讨论】：

这对我来说非常适合将 Material-UI 组件居中。作为一个插件，在 translate 方法中，第一个参数是水平平移，第二个参数是垂直平移。
这个方案有个问题，它会把组件的尺寸在宽高上缩小50%

【解决方案5】：

@Nadun 的版本对我不起作用，尺寸调整效果不佳。删除了direction="column" 或将其更改为row，有助于构建具有响应式大小的垂直登录表单。

<Grid
  container
  spacing={0}
  alignItems="center"
  justify="center"
  style={{ minHeight: "100vh" }}
>
  <Grid item xs={6}></Grid>
</Grid>;

【讨论】：

【解决方案6】：

使用其他答案后，xs='auto' 对我有用。

<Grid container
    alignItems='center'
    justify='center'
    style={{ minHeight: "100vh" }}>

    <Grid item xs='auto'>
        <GoogleLogin
            clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
            buttonText="Log in with Google"
            onSuccess={this.handleLogin}
            onFailure={this.handleLogin}
             cookiePolicy={'single_host_origin'}
         />
    </Grid>
</Grid>

【讨论】：

【解决方案7】：

您所要做的就是将您的内容包装在 Grid Container 标记中，指定间距，然后将实际内容包装在 Grid Item 标记中。

 <Grid container spacing={24}>
    <Grid item xs={8}>
      <leftHeaderContent/>
    </Grid>

    <Grid item xs={3}>
      <rightHeaderContent/>
    </Grid>
  </Grid>

另外，我在材质网格方面遇到了很多困难，我建议你检查一下 flexbox，它是自动内置在 CSS 中的，你不需要任何额外的包来使用。它非常容易学习。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

谢谢，所以我使用了 3 个网格项并将组件放在中间以使其居中？

【解决方案8】：

如果您只需要在 MUI v5 中将几个项目居中放置在一行或一列中，您可以使用Stack 而不是Grid：

<Stack alignItems="center">
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

另一个行方向的例子：

<Stack direction="row" justifyContent="center">
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

现场演示

【讨论】：

【解决方案9】：

小更新 07-09-2021 'justify' 现在是 'justifyContent="center"'

https://material-ui.com/components/grid/

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。

【解决方案10】：

只要style={{display:'flex';justifyContent:'center';alignItems:'center'}}

【讨论】：