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

Question

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 1

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