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

77

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

— 佐罗
source

可以肯定的是，您是否在谈论这个库-material-ui.com对吗？

— Swapnil

是的，我说的是同一个图书馆

— zorro

147

由于您将在登录页面中使用它。这是我在使用Material-UI的登录页面中使用的代码

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

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

</Grid>

这将使此登录表单位于屏幕中央。

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

希望这会帮助你。

— 那敦
source

2

稍作修正，对于Op的用例，弯曲方向应为row >>> direction =“ row”

— Peter Moses

通常，alignItems = center和justify = center会将组件置于页面的中心，但实际并非如此。添加style = {{minHeight：'100vh'}}即可完成工作，但会在页面中添加滚动条。如何解决？

— 苗条的

40

另一个选择是：

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

— 最高
source

如预期般完美工作

— Somnath Kadam

12

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

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

— OnurYıldırım
source

10

这是不带网格的另一个选项：

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

— 约克
source

这对于我将Material-UI <Fab>组件居中的效果很好。作为附加，在translate方法中，第一个参数是水平平移，第二个参数是垂直平移。

— Michael Jay

该解决方案具有的一个问题，它会通过50％的宽度和高度缩短部件的尺寸

— 尼古拉斯阿波罗尼亚

5

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

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

...

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

— 基利安·休伊格（Killian Huyghe）
source

3

您要做的就是将内容包装在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/

— 加文·托马斯（Gavin Thomas）
source

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

— zorro