CSS-position absolute와 transform의translate를 사용한 가운데정렬

position의 absolute

left  :50%

tpp : 50%

-> 이미지의 크기가 width : 120px  height : 120px 가정,

 

절대적인 위치로 왼쪽에서 50% ,  위에서 50% 떨어져있는 상태로 정가운데를 기준으로 절대적인 이미지 위치 생성,

그럼 당연히 이미지 크기가 틀어짐.

 

그렇다면, transform의 translate 속성으로 그 이미지 절대적인 위치를 좌표값을 기준으로 가운데로 다시 재정렬

transform:translate(-50%,-50%);

-> 가운데 정렬.