CSS transform

transform: translate(30px, 50px);

x방향으로 30px, y방향으로 50px 이동한다.

transform: translateX(30px);

x방향으로 30px 이동한다.

transform: translateY(10px);

y방향으로 10px 이동한다.

---

translate() 를 리셋하려면 transform: none 을 지정한다.

---

요소를 가운데로 보내기

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

top, left 값과 translate 의 x, y 값이 부호만 다르고 크기는 같아야 한다.

약간 윗쪽으로 배치하려면 top을 30% 정도로 조정할 수 있다. 단, 그러면 translate의 x값도 -30%가 돼야 한다.