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

Question

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

Answer 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 容器是一种未记录的行为。

2022-06-06更新

除此之外，另一种更好的新方法是使用

Box

组件。

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

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

希望这对你有帮助。

Answer 2

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

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

...

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

Answer 3

另一种选择是：

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

Answer 4

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

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

Answer 5

@Nadun 的版本对我不起作用，大小调整效果不佳。删除了

direction="column"

或将其更改为

row

，有助于构建具有响应式大小的垂直登录表单。

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

Answer 6

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

现场演示

Answer 7

在使用其他答案的情况下，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>

Answer 8

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

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

2021 年 7 月 9 日的小更新 'justify' 现在是 'justifyContent="center"'

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

Answer 10

对我来说最通用的解决方案是结合使用container和item道具。

container 和item 道具是两个独立的布尔值；它们可以组合在一起，使 Grid 组件既是弹性容器又是子容器。

Grid MUI 文档 - https://mui.com/material-ui/react-grid/#responsive-values

<Grid container alignContent={'center'} xs={12}>
  <Grid container item xs={6} justifyContent={'start'}> 
    <span> content one </span> 
  </Grid>
  <Grid container item xs={6} justifyContent={'center'}> 
    <span> content two </span>
  </Grid>
</Grid>

Answer 11

你可以制作这个组件并在你想要的任何地方使用它。你也可以添加你的道具：

import Box from '@mui/material/Box';

export default function Center(props: any) {

    const { children } = props

    return (
        <Box
            sx={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                flexDirection: 'column'
            }}
            {...props}
        >
            {children}
        </Box>
    );
}

Answer 12

只是做

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