91

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?

8
  • Did you find the solution? Sep 10, 2015 at 20:34
  • 12
    Good question, and I don't consider it a duplicate.
    – Nahn
    Mar 4, 2016 at 21:26
  • 3
    this isn't a duplicate guyz! May 11, 2016 at 10:34
  • 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, 2016 at 14:54
  • Did you figure this one out? Apr 20, 2017 at 16:27

1 Answer 1

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);
12
  • 45
    this doesnt seem to work :(
    – Mike
    Jan 21, 2016 at 10:47
  • 18
    Use transfom: scale(2); zoom: 0.5 if nothing works. Worked for me! May 11, 2016 at 10:40
  • 3
    @KushagraGour while transfom: scale(2); zoom: 0.5 seems to work - if you use JS getBoundingClientRect() > it'll result in wrong calculations. Jan 26, 2017 at 16:24
  • 2
    zoom is not a valid CSS property Feb 27, 2017 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 8, 2017 at 8:45

Not the answer you're looking for? Browse other questions tagged or ask your own question.