레이어를 가운데 정렬

수평

transform: translateX(-50%);

수직

transform: translateY(-50%);

수평&수직

dispaly: flex; 
justify-content: center;
align-items: center;

수평 정렬 사용 예시

width: 200px;
position: relative;
left: 50%;

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

width: 200px;
position: relative;
left: 50%;
transform: translateX(-50%);

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