我不太了解 Material UI 网格系统。如果我想使用表单组件进行登录,在所有设备(移动设备和桌面设备)上将其置于屏幕中央的最简单方法是什么?
最佳答案
因为您将在登录页面上使用它。 这是我在使用 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 网格,您会在 IE 中看到一些错位的内容。
正如@max指出的,另一种选择是,
<Grid container justifyContent="center">
<Your centered component/>
</Grid>
请注意,Material UI v4 及以下版本应使用 justify="center"。
但是,使用没有网格项的网格容器是一种未记录的行为。
2022年6月6日更新
除此之外,另一种更好的新方法是使用 Box
组件。
<Box
display="flex"
justifyContent="center"
alignItems="center"
minHeight="100vh"
>
<YourComponent/>
</Box>
这最初是由 Killian Huyghe 作为另一个答案发布的。
希望这对您有帮助。
关于reactjs - 如何将 Material UI 中的组件居中并使其具有响应能力?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50766693/