[CSS]position:absolute 사용 시 가운데 정렬 하는 방법(margin, transform)

position:relative / position:absolute 를 이용하여 마크업을 하는 경우가 많이 있습니다.

absolute 마크업을 하고 콘텐츠를 가운데 정렬을 하는 방법에 대해 간단히 적어 보겠습니다.

 

첫번째, margin값을 이용하는 방법

left or top 값을 50%를 주고 콘텐츠의 width or height 값의 절반을 margin 값으로 빼는 방법입니다.

말로는 이해하기 힘들수 있으니 간단히 보여드리겠습니다.

 

See the Pen translate 를 이용한 가운데 정렬2 by yeoninim00 (@blisher-tool) on CodePen.

 

 

두번째, transform을 이용하는 방법

좌표 공간(X축, Y축)을 변형하여 콘텐츠의 위치를 바꾸는 방법입니다.

역시 간단히 보여드리겠습니다.

 

See the Pen translate 를 이용한 가운데 정렬 by yeoninim00 (@blisher-tool) on CodePen.

 

 

저는 주로 첫번째 방법을 이용하였습니다.

처음에 공부할때 배운 방법이고 딱히 불편한점은 없었습니다.

그러다 두번째 방법을 알게 되고 이제는 두번째 방법을 주로 사용 하고 있습니다.

어떠한 방법이 더 좋고 나쁜지는 모르겠지만 첫번째 보다는 두번째 방법이 조금은 편한 것 같습니다.

 

두번째 방법에서 사용 된 transform은 재미있는 기능이 많은 것 같습니다.

이번에 사용한 translate 뿐 아니라

scale, rotate, skew, 등이 있는데..주로 버튼 디자인을 할때 많이 사용하고 있습니다.

저도 자주 사용하지는 않아서 익숙하지는 않지만 잘 사용하면 재미있을 UI을 만들 수 있습니다.

나중에 정리 한번 해봐야 겠네요.