AbsoluteCenter

부모 요소의 크기를 기준으로 자식 요소를 가로·세로 모두 가운데 정렬할 때 사용하는 컴포넌트예요. 절대 위치(absolute positioning) 방식을 사용해요.

출처: 문서

본문

AbsoluteCenter 컴포넌트는 position: absolute 전략을 사용해 자식 요소를 부모 요소 기준으로 가운데 정렬해요.

부모 요소에 position: relative가 있어야 제대로 위치가 잡혀요.

import { AbsoluteCenter } from "@chakra-ui/react"

<Box position="relative" h="100px">
  <AbsoluteCenter>Centered Content</AbsoluteCenter>
</Box>

axis prop을 사용해 어떤 축으로 가운데 정렬할지 제어할 수 있어요. 옵션은 horizontal, vertical, both(기본값)가 있어요.

AbsoluteCenter를 아이콘, 배지, 상태 표시기 등 다양한 콘텐츠 유형과 함께 사용할 수 있어요.

기존 콘텐츠 위에 가운데 정렬해야 하는 로딩 오버레이나 모달 형태의 콘텐츠를 만들기에 딱 좋아요.

AbsoluteCenter는 가로 위치와 transform을 적절히 조정해 오른쪽에서 왼쪽으로 쓰는(RTL) 레이아웃을 자동으로 처리해요.