Изображение с центром на хроме и firefox, но не сафари

Question

У меня есть изображение, которое я хочу положить в центр моей страницы.

Его сосредоточены на Firefox и Chrome, используя этот код:

HTML:

<div id="logo"> 
<img src="images/logo.png" width="80%"> 
</div> 

Css:

#logo{ 

    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index:1; 
    text-align:center; 
    background:#FFFFFF; 
    border-radius:50px; 


} 

Но когда я открываю страницу в Safari, изображение в справа от страницы.

Любые предложения?

Answer 1

Вы должны использовать префиксы браузеров:

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

Согласно caniuse.com, Safari по-прежнему зависит от префикса -webkit-.

• MDN
• Can I Use

(Кроме того, поскольку вы новичок, чтобы принять ответ вы нажмите на зеленую кнопку. Это дает вам и мне репутацию).