CSS - position 통해서 화면 가운데 정렬 (transform 사용)

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

위와 같이 top과 left를 50퍼를 주면 정 중앙이 배치하는 것의 왼쪽 꼭지점이 오게 된다.

따라서 transform: translate를 통해서 중앙에 맞출 수 있는데,

transform: translateX(), transform: translateY()를 통해서 오른쪽(x축으로) 이동, 아랫쪽 (y축으로 이동) 이동할 수 있고,

-(minus)를 통해서 왼쪽과 위쪽으로 이동시킬 수 있다. 이것을 합쳐 사용하는것이 transform: translate(x,y)인데, 이를 통해서 도형의 50퍼만큼 위쪽과 왼쪽으로 당겨 가운데로 맞출 수 있다

(position: relative에서도 left로 50% 주고 translateX(-50%)로 당겨주면 가운데 맞춰지지만 그냥 margin:auto쓰면 된다.) 

 

* position: relative와 absolute의 차이점: 

box가 여러개 있을때, relative를 사용하면 그 원래 공간을 차지 한 상태에서 offset 거리를 준다. 그리고 원래 공간 차지한 곳이 존재하고 box 추가시 쌓인다

하지만 absolute는 static이 아닌 조상의 position 위치를 기준으로 offset을 적용한다. 조상 tag중에 예를들어 relative가 잇으면 그것을 기준으로 움직이게 된다. 

 

relative는 원래 있어야 하는 곳에서 위치가 바뀌고 다른 box에 영향을 끼치는 않음. z-index로 가려질수는 있지만.
하지만 absolute를 적용하면 다른 box에 영향을 준다. 쌓이지 않고 독립적으로 움직임.
box를 쌓을때 absolute도 offset안주면 전 box 다음에 쌓이는데 offset으로 body기준에서 움직임.
부모를 relative로 하면 absolute의 기준 좌표가 부모로 바뀜.

relative는 margin: auto로 가운데로 맞출 수 있고, absolute는 위 방식으로 가운데로 맞출 수 있다.