Как центрировать компонент в Material-UI и сделать его отзывчивым?

Ответ 1

Поскольку вы собираетесь использовать это на странице входа в систему. Вот код, который я использовал на странице входа, используя 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.

Надеюсь, что это поможет вам.

Ответ 2

Другой вариант:

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

Ответ 3

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

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

Ответ 4

Вот еще один вариант без сетки:

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

Ответ 5

Все, что вам нужно сделать, это обернуть содержимое в тег Grid Container, указать интервал, а затем обернуть фактическое содержимое внутри тега элемента Grid.

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

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

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

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

Ответ 6

как заставить реагировать компоненты по центру при различном разрешении экрана