PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Sunday, September 4, 2022

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

 September 04, 2022     authentication, desktop, material-ui, mobile, reactjs     No comments   

Issue

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)?


Solution

Since you are going to use this on a login page. Here is a code I used in a Login page using 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 and below

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

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

</Grid> 

this will make this login form at the center of the screen.

But still, IE doesn't support the Material-UI Grid and you will see some misplaced content in IE.

As pointed by @max, another option is,

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

Please note that versions MUIv4 and below should use justify="center" instead.

However, using a Grid container without a Grid item is an undocumented behavior.

Update on 2022-06-06

In addition to that, another new and better approach will be using the Box component.

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

This was originally posted by Killian Huyghe as another answer.

Hope this will help you.



Answered By - Nadun
Answer Checked By - Marilyn (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing