CSS: transform: translate(-50%, -50%) makes texts blurry

Question

I want to center my div and I use this method, but it makes my texts inside the div blurry:

<!-- language: lang-css -->

#div {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

is there any way to center my div?

I am curious, too. Centering with top + transform: translate would be a great solution in many cases, but this prevents from using it. Blurry texts, hover transitions are broken and some elements have bad positioning inside transformed elements. Clearly a bug for me (Chrome only). — marcias, Nov 14 '16 at 14:54
This issue is still there in the latest Chrome - but it's not there in Firefox! That's a little funny. — kumarharsh, Mar 13 '19 at 07:40
You can use flexbox nowadays, which will prevent this issue. — maracuja-juice, Apr 02 '19 at 15:38

score 10 · Answer 1 · answered Jun 29 '15 at 06:45

10

Add these styles around elements blocks which you are translating to fix the anti-aliasing, Translate Z-axis to have a zero value.

-webkit-font-smoothing: subpixel-antialiased;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

answered Jun 29 '15 at 06:45

4dgaurav

thanks for the reply I will try this :) – Ken Avila Jun 29 '15 at 06:49
45

this doesnt seem to work :( – Mike Jan 21 '16 at 10:47
18

Use `transfom: scale(2); zoom: 0.5` if nothing works. Worked for me! – Kushagra Gour May 11 '16 at 10:40
1

This helped me! Thanks. – Travis L Aug 11 '16 at 17:35
3

@KushagraGour while `transfom: scale(2); zoom: 0.5` seems to work - if you use JS `getBoundingClientRect()` > it'll result in **wrong calculations**. – Roko C. Buljan Jan 26 '17 at 16:24
2

zoom is not a valid CSS property – catamphetamine Feb 27 '17 at 13:18
7

One can't use `transform: scale(2);` without overwriting `transform: translate(-50%, -50%)` and thus making it not translated... – Akerus Aug 08 '17 at 08:45
@Akerus You can use matrix – thexpand Sep 27 '17 at 14:00
I just had to use `zoom: 1.02` and it looked normal again. – Black Jun 04 '18 at 15:45
@Black yes, that can make it better. But value is depends on browser width. So... it's not a fix while you can be sure which value actually helps user. – kelegorm Jun 28 '18 at 14:12
@kelegorm, yes, it actually does not really work always. – Black Jun 29 '18 at 07:24
I played a little bit with `zoom` and figured out `zoom:1.04;` is working in my case. – David Jul 22 '20 at 08:57

1 Answers1