CSS -transform: translate(-50%,-50%) 정렬공식

transform: translate(-50%,-50%) 정렬공식

컨텐츠의 요소가 항상 정 가운데로 가도록 지정

 

translate() 속성
translate (x, y)	함수의 요소를 왼쪽에서 부터 X거리 , 위쪽에서부터 Y 거리만큼 상대적으로 위치를 정하거나 이동 및 재배치 지정
translateX(수평만)	좌우(수평 방향)의 이동 거리 값을 지정
translateY(수직만)	함수는 상하(수직 방향)의 이동 거리 값을 지정
translateZ(z방향만)	Z 방향의 거리로 이동을 지정 % 지정 불가 X (%사용해도 0)

 

*주의할점

정렬공식을 사용했을때 이미지가 깨지는 현상이 있다. 

모니터는 픽셀로 이루어져 있기때문에 %사용으로 픽셀에 맞지 않을 시 이미지가 깨져보임

 

 

---

 

 

• 기존 정렬공식 사용시 

#header .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

 

이렇게 가운데 로고가 뿌옇게 나옴

 

 

---

 

 

• 해결방법1
  translate의 퍼센트 값을 소수점으로 지정해준다. 
  
  단 이럴경우 위치가 살짝 조정됨 (정가운데가 안맞을 수 있음)

#header .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50.5%);
}

• 해결방법2
  translateX 가로 값만 정렬지정하고 
  높이를 px로 지정해준다. 
  
  단 이럴경우 header 의 높이가 수정되면 자동 정렬이 불가.

#header .logo {
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
}

첫번째 해결방법으로 위치가 위로 사알짝 조정됬지만 이미지는 깨끗히 나온다.