css transfrom translate(-50%,-50%) 사용시 이미지,텍스트 흐림 현상

 

css transfrom translate(-50%,-50%) 사용시 이미지,텍스트 흐림 현상

webkit 브라우저에서 가운데로 정렬하기 위해

 

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

 

를 사용할때 텍스트 또는 사진이 흐릿하게,, 뿌옇게 보이는 버그가 발생한다.

 

 

 

그럴때!!

transform:translate(-50%,-50%) 말고 

 

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

 

를 사용한다.

그럼 해결,,

 

단, 이미지나 컨텐츠에 height값이 잡혀있을 경우

홀수값으로 줘야 작동한다.

 

 

약간 야매방법이라서,,

absolute로 꼭 가운데 정렬을 해줘야하는데 흐릿한 현상이 생길경우 사용하는 게 좋을것같다.

다른 방법으로 가운데정렬을 사용해도 된다면

다른 방법을 쓰자

 

 

+추가

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

에 width 값 height 값이 잡혀있을때 흐림현상이 일어나면

홀수로 값을 바꿔주니 또렷해진다.

 

뭐냐..ㅎㅎㅎ