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-前缀。

（另外，既然你是新手，接受答案你点击绿色按钮。这会给你和我的声誉。）

图像以chrome和firefox为中心，但不是safari

1 个答案: