머티리얼 UI에서 컴포넌트를 중앙에 배치하여 응답성을 높이는 방법

머티리얼 UI에서 컴포넌트를 중앙에 배치하여 응답성을 높이는 방법

반응 물질-UI 그리드 시스템을 잘 모르겠어요로그인에 폼 컴포넌트를 사용하는 경우 모든 디바이스(모바일 및 데스크톱)에서 폼 컴포넌트를 화면 중앙에 배치하는 가장 쉬운 방법은 무엇입니까?

로그인 페이지에서 사용할 예정이기 때문에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 이하

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

MUIv4 이하 버전은 대신 justice="center"를 사용해야 합니다.

그러나 그리드 항목 없이 그리드 컨테이너를 사용하는 것은 문서화되지 않은 동작입니다.

2022-06-06 업데이트

이와 더불어, 다른 새롭고 더 나은 접근법으로는Box요소.

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

이것은 Killian Huyghe에 의해 다른 답변으로 게시되었습니다.

이게 도움이 되길 바라.

Box 컴포넌트를 사용하여 이 작업을 수행할 수 있습니다.

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

...

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

또 다른 옵션은 다음과 같습니다.

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

그리드가 없는 다른 옵션은 다음과 같습니다.

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

@Nadun 버전이 작동하지 않아 사이징이 잘 되지 않았습니다.삭제했다.direction="column"또는 로 변경합니다.row는, 사이징에 응답하는 수직 로그인 폼의 작성에 도움이 됩니다.

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

MUI v5에서 몇 개의 항목을 열 또는 행 중앙에 배치해야 하는 경우 대신 을 대신 사용할 수 있습니다.Grid:

<Stack alignItems="center">
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

행 방향의 다른 예는 다음과 같습니다.

<Stack direction="row" justifyContent="center">
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

라이브 데모

다른 답변으로 xs='auto'가 도움이 되었습니다.

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

내용을 그리드 컨테이너 태그로 감싸고 간격을 지정한 다음 실제 내용을 그리드 항목 태그로 감싸기만 하면 됩니다.

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

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

또한 재료 그리드에 많은 어려움을 겪었는데, CSS에 자동으로 내장된 플렉스박스를 체크 아웃하는 것을 추천합니다.매우 배우기 쉽습니다.

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

little update 07-09-timeout 'filename'이 이제 'justifyContent="center"로 지정되었습니다.

https://material-ui.com/components/grid/

저에게 가장 다재다능한 솔루션은 컨테이너와 아이템 소품을 함께 사용하는 것입니다.

용기 및 항목 소품은 두 개의 독립된 부울이며, 그리드 구성요소를 플렉스 컨테이너와 하위 컨테이너로 결합할 수 있습니다.

그리드 MUI 매뉴얼 - https://mui.com/material-ui/react-grid/ #response-values

<Grid container alignContent={'center'} xs={12}>
  <Grid container item xs={6} justifyContent={'start'}> 
    <span> content one </span> 
  </Grid>
  <Grid container item xs={6} justifyContent={'center'}> 
    <span> content two </span>
  </Grid>
</Grid>

하다style={{display:'flex';justifyContent:'center';alignItems:'center'}}

언급URL : https://stackoverflow.com/questions/50766693/how-to-center-a-component-in-material-ui-and-make-it-responsive