SimonLeCat SimonLeCat - 2 months ago 19
CSS Question

Why on Safari the transform translate doesn't work correctly?

I often use this code to center a

div
in view:

.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}


It works great on Firefox, Internet Explorer and Chrome, however not in Safari.

What's a workaround to center an image in Safari web browser?

Answer

You need another vendor prefixed style.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Please refer below to know which browser supports what and what prefix has to be added. http://caniuse.com/#feat=transforms2d