Center란?

Center는 공식 문서에 따르면 다음과 같다.

Center is a layout component that centers its child within itself.

해석해보자면, "Center는 Center의 자식을 자기자신(Center)의 중심에 두는 Layout Component이다." 이라는 뜻인 것 같다.

e.g.

이런 식으로 수평 중앙 정렬 & 수직 중앙 정렬을 의미하는 것 같다.

그림의 코드는 아래와 같다.

<Center bg='tomato' w='100px' h='100px' color='white'>
	This is the Center
</Center>

여기서 중요한 속성은 w와 h이다.
문서에 따르면, Center는 주어진 width와 height에 대해서 child를 중앙에 위치 시킨다고 한다.
내가 이해한 바로는 w와 h에 대해서 상대적으로 계산해서 중앙에 위치시킨다는 말인 것 같다.

그리고 문서에 따르면 Center와 같은 역할을 하는 다른 Component들은 다음과 같다.

Square: centers its child given size (width and height)
Circle: a Square with round border-radius
AbsoluteCenter: centers relative to its parent by given axis

문서의 양이 방대하기도 하고, 나도 이제 막 Chakra-ui를 공부중이라...
관련한 정보는 여기에서 찾아보자😄