如何在Material-UI中居中组件并使其响应？

Question

我不太了解React Material-UI网格系统.如果我想使用表单组件进行登录,那么在所有设备(移动设备和桌面设备)上将其集中在屏幕上的最简单方法是什么？

Answer 1

因为您将在登录页面中使用它.这是我在使用Material-UI的Login页面中使用的代码

<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中看到一些错位的内容.

希望这会帮助你.

Answer 2

您可以使用 Box 组件执行此操作：

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

...

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

Answer 3

如果您只需要在Material UI 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>

现场演示

Answer 4

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

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

Answer 5

这是没有网格的另一种选择：

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

Answer 6

另一个选择是：

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

Answer 7

您所要做的就是将内容包装在网格容器标记内，指定间距，然后将实际内容包装在网格项目标记内。

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

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

另外，我在材质网格方面遇到了很多困难，我建议您检查自动内置于 CSS 中的 Flexbox，并且不需要使用任何附加包。它非常容易学习。

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

Answer 8

使用其他答案时， 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>