[transform] translate(-50%, -50%) 이미지 흐림 + IE에서 translate calc 적용

이미지를 가운데 정렬하기 위해 

css에 transfrom translate(-50%,-50%) 사용시 이미지가 흐려지는 경우가 있는데

transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px))

위처럼 + 0.5px씩 더해주면 흐림 현상이 덜함

 

그런데 익스플로러에서는 translate 안에 calc가 들어가면 적용이 안됨

이런 경우에는 calc로 쓴 부분을 아래와 같이 분리해주면 됨

transform: translate(-50%, -50%) translate(0.5px, 0.5px)