[CSS] left로 가운데 정렬하기

left 속성이란?

left 속성은 position이 static이 아니라 relative, absolute, fixed일 때 사용할 수 있다.

static일 때 사용하면 아무 일도 벌어지지 않으므로 꼭 position 속성과 함께 사용되어야 한다.

left는 absolute, fixed일 때는 브라우저 내부의 칸으로부터 지정한 만큼 떨어질 수 있게 한다.

 

.div1 {
  left: 50%;
  transform: translateX(-50%);
}

좌상단의 꼭짓점을 가운데에 맞추고, 좌상단 꼭짓점을 기준으로 했기 때문에 오른쪽으로 약간 쏠린 몸체를 가운데로 옮기기 위해 엘레먼트의 반만큼 왼쪽으로 옮기기 위해 transform: translateX(-50%)을 준다.