[CSS] alignment - position과 transform으로 가운데 정렬

아래 예시로 가운데 정렬을 해보쟈

부모박스인 container에 position : relative를 주고 box에는 position : absolute / top과 left는 각각 50%씩 주어

box는 부모 박스를 기준으로 50%씩 이동하게 되었다. 

 

그러나 이렇게 하면 정 가운데가 box의 왼쪽 상단에 맞춰져  가운데 정렬이 되지 않는다..! 

가운데 정렬을 해주기 위해 box의 절반만큼 가운데로 이동시키면 되므로

transform : translate(-50%,-50%) 해주었다.

good