CSS- left: 50%; transform: translateX(-50%);

왜 left: 50%;  transform: translateX(-50%);  으로 요소의 중심을 맞추는가?

- css  left 속성은 부모요소의 사이즈를 기본으로 한다.  transform 속성은 타겟된 요소의 사이즈에 기초를 둔다. 

 

간단한 예시로 이해해보자.

See the Pen Untitled by dahye (@dahyekim0311) on CodePen.

 

 

---

위와 같이 .child의 요소가 부모요소 기준점으로 50%씩 이동하면 다음과 같이 기준점 기준으로 중앙정렬이 되었음.

 

 

 

아래 그림과 같이 가운데 위치만큼 이동을 해줘야한다. 

 

 

다음과 같이 자식 요소에 transform:translate(-50%, -50%); 구문을 추가하면 정확하게 가운데 정렬이 된것을 확인 할 수 있다.

 

 

See the Pen Untitled by dahye (@dahyekim0311) on CodePen.