CSS: 중앙 정렬 position, transform

원래 text-align: center랑 justify-content: center를 사용하려고 했는데 중앙 정렬이 안되길래,, 다른 방법으로 해봤다.

 

🕶 position, transform 사용 

 

export const RoutineButton = styled(Button)`
  background-color: #D0C9C0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
`;

position: absolute; 부모 엘리먼트의 위치를 기준으로 절대적인 위치 값을 설정

top: 50%; left: 50%; 이렇게 두개를 해주니까 버튼의 왼쪽 위 모서리를 기준으로 정렬하기 때문에 완전한 가운데 정렬은 아니었다,,

그래서 transform: translate(-50%, -50%); 를 하니까 정중앙에 위치했다.

transform은 대상의 형태를 변경하고 translate는 대상의 위치를 조정한다. 

translate의 첫번째랑 두번째는 각각 x축, y축으로 대상 엘리먼트(RoutineButton)의 절반 값을 빼서 이동하라는 의미이다.