레이어 위치를 가운데 정렬 할때 유용한 CSS transform

 

레이어 가운데 정렬
수평 : transform:translateX(-50%);
수직 : transform:translateY(-50%);
수평,수직 : display:flex; justify-content:center;align-items:center;

 

수평 정렬 사용예시(수직 정렬도 비슷한 방법으로 상요하면 됨)

#disp { width:200px; position:relative; left:50%; }

 => 레이어의 왼쪽 모서리가 화면의 50% 에서부터 시작하여 출력됨

 

#disp { width:200px; position:relative; left:50%; transform:translateX(-50%); }

 => 레이어의 왼쪽 모서리가 화며의 50% 에서 width 값의 -50% 인 100px 만큼 왼쪽으로 이동이 되어 가운데 정렬이 됨