Як відцентрувати компонент у Material-UI та зробити його чуйним?

Я не зовсім розумію систему сіток React Material-UI. Якщо я хочу використовувати компонент форми для входу, який найпростіший спосіб відцентрувати його на екрані на всіх пристроях (мобільних та настільних)?

Оскільки ви збираєтеся використовувати це на сторінці входу. Ось код, який я використав на сторінці входу за допомогою 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 Grid, і ви побачите дещо зміщений вміст в IE.

Сподіваюся, це допоможе вам.

Інший варіант:

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

Версія @ Nadun не працювала для мене, розмір не працював добре. Видалено direction="column"або змінено на row, допомагає створювати вертикальні форми входу з адаптивним розміром.

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

Ось ще один варіант без сітки:

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

Це можна зробити за допомогою компонента Box:

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

...

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

Все, що вам потрібно зробити, - це обернути вміст усередині тегу Grid Container, вказати інтервал, а потім обернути фактичний вміст всередині тегу Grid Item.

 <Grid container spacing={24}>
    <Grid item xs={8}>
      <leftHeaderContent/>
    </Grid>

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

Крім того, я багато боровся з сіткою матеріалів, я пропоную вам перевірити flexbox, який вбудований в CSS автоматично, і вам не потрібні ніякі пакети доповнень для використання. Це дуже легко навчитися.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/