blocks|key|4208310|text|另一种选择是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4208311|<Grid+container+justify+=+"center">
++<Your+centered+component/>
</Grid>|code-block|syntax|javascript|4208312|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Another option is:

<pre><code>&lt;Grid container justify = "center"&gt;
 &lt;Your centered component/&gt;
&lt;/Grid&gt;
</code></pre>

blocks|key|4209100|text|您可以使用Box组件执行此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4209101|import+Box+from+"@material-ui/core/Box";

...

<Box
++display="flex"
++justifyContent="center"
++alignItems="center"
++minHeight="100vh"
>
++<YourComponent/>
</Box>|code-block|syntax|javascript|4209102|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can do this with the Box component:

<pre><code>import Box from "@material-ui/core/Box";

...

&lt;Box
 display="flex"
 justifyContent="center"
 alignItems="center"
 minHeight="100vh"
&gt;
 &lt;YourComponent/&gt;
&lt;/Box&gt;
</code></pre>

blocks|key|4208859|text|下面是另一个没有网格的选项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4208860|<div
++++style={{
++++++++position:+'absolute',+
++++++++left:+'50%25',+
++++++++top:+'50%25',
++++++++transform:+'translate(-50%25,+-50%25)'
++++}}
>
++++<YourComponent/>
</div>|code-block|syntax|javascript|4208861|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is another option without a grid:

<pre><code>&lt;div
 style={{
 position: 'absolute', 
 left: '50%', 
 top: '50%',
 transform: 'translate(-50%, -50%)'
 }}
&gt;
 &lt;YourComponent/&gt;
&lt;/div&gt;
</code></pre>

blocks|key|4208335|text|@Nadun的版本对我不起作用，大小不好。删除direction="column"或将其更改为row，有助于构建具有响应大小的垂直登录表单。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4208336|<Grid
++container
++spacing={0}
++alignItems="center"
++justify="center"
++style={{+minHeight:+"100vh"+}}
>
++<Grid+item+xs={6}></Grid>
</Grid>;|code-block|syntax|javascript|4208337|entityMap^0|N|I|1B|3|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

The @Nadun's version did not work for me, sizing wasn't working well. Removed the <code>direction="column"</code> or changing it to <code>row</code>, helps with building vertical login forms with responsive sizing.

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

blocks|key|4208653|text|使用其他答案时，xs='auto‘为我做了一个小把戏。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4208654|<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>|code-block|syntax|javascript|4208655|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

With other answers used, xs='auto' did a trick for me.
<pre><code>&lt;Grid container
 alignItems='center'
 justify='center'
 style={{ minHeight: &quot;100vh&quot; }}&gt;

 &lt;Grid item xs='auto'&gt;
 &lt;GoogleLogin
 clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
 buttonText=&quot;Log in with Google&quot;
 onSuccess={this.handleLogin}
 onFailure={this.handleLogin}
 cookiePolicy={'single_host_origin'}
 /&gt;
 &lt;/Grid&gt;
&lt;/Grid&gt;
</code></pre>

blocks|key|4208298|text|您所要做的就是将内容包装在网格容器标签中，指定间距，然后将实际内容包装在网格项目标签中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4208299|+<Grid+container+spacing={24}>
++++<Grid+item+xs={8}>
++++++<leftHeaderContent/>
++++</Grid>

++++<Grid+item+xs={3}>
++++++<rightHeaderContent/>
++++</Grid>
++</Grid>|code-block|syntax|javascript|4208300|另外，我在材质网格方面也遇到了很多困难，我建议你去看看flexbox，它是自动内置到CSS中的，你不需要任何额外的包就可以使用。它非常容易学习。|4208301|https://css-tricks.com/snippets/css/a-guide-to-flexbox/|offset|length|4208302|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|1J|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

All you have to do is wrap your content inside a Grid Container tag, specify the spacing, then wrap the actual content inside a Grid Item tag.

<pre><code> &lt;Grid container spacing={24}&gt;
 &lt;Grid item xs={8}&gt;
 &lt;leftHeaderContent/&gt;
 &lt;/Grid&gt;

 &lt;Grid item xs={3}&gt;
 &lt;rightHeaderContent/&gt;
 &lt;/Grid&gt;
 &lt;/Grid&gt;
</code></pre>

Also, I've struggled with material grid a lot, I suggest you checkout flexbox which is built into CSS automatically and you don't need any addition packages to use. Its very easy to learn. 

<a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow noreferrer">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a>

blocks|key|4208691|text|小更新07-09-2021+'justify‘现在是’justifyContent=‘中心’|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4208692|https://material-ui.com/components/grid/|offset|length|4208693|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|14|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

Little update 07-09-2021 'justify' is now 'justifyContent=&quot;center&quot;'
<a href="https://material-ui.com/components/grid/" rel="nofollow noreferrer">https://material-ui.com/components/grid/</a>

blocks|key|4209184|text|只需执行style={{display:'flex';justifyContent:'center';alignItems:'center'}}|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4209185|entityMap^0|4|1W|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

just do <code>style={{display:'flex';justifyContent:'center';alignItems:'center'}}</code>

I don't quite understand the React Material-UI grid system. If I want to use a form component for login, what is the easiest way to center it on the screen on all devices (mobile and desktop)?

How to center a component in MUI and make it responsive?

容器

我不太理解React Material-UI网格系统。如果我要使用表单组件进行登录，在所有设备(移动设备和台式机)的屏幕上将其居中的最简单方法是什么？

问如何在MUI中居中组件并使其具有响应性？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在MUI中居中组件并使其具有响应性？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在MUI中居中组件并使其具有响应性？
EN