translate(백분율, 백분율)

Q.
translate(-50%, -50%)면 자신의 크기의 반씩 왼쪽과 위로 움직이는거겠네?

A.
네, 맞습니다! translate(-50%, -50%)는 요소 자신의 크기의 절반만큼 왼쪽과 위로 이동시키는 것을 의미합니다.

• -50% (x축): 요소 너비의 절반만큼 왼쪽으로 이동
• -50% (y축): 요소 높이의 절반만큼 위로 이동

이렇게 함으로써 요소의 중심점이 화면의 중심점에 위치하게 되어, 요소를 화면 중앙에 정확하게 배치할 수 있습니다.

+추가 방법

• • 부모 요소에 display: flex; 를 설정하고, 자식 요소를 중앙에 배치하기 위한 속성들을 추가합니다.
  • flex의 경우:
    • justify-content: center; (수평 중앙 정렬)
    • align-items: center; (수직 중앙 정렬)
• 예시 (flex):

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}