transform:translate 无法在 Safari 中工作

Question

我想使用此代码将 div 水平居中。除了 safari（在 windows 和 mac！）之外，它在所有方面都可以正常工作。当我检查 here 时，它说它适用于 3.2 版本之后的版本，而我有 5.1.7。

一定是我哪里做错了

.heroimage {
    position:relative;
    z-index:10;
    }

.heroimage article {
        position:absolute;
        z-index:100;
        left:50%;
        top:128px;
        transform:translate(-50%,0%);
       -webkit-transform:-webkit-translate(-50%,0%);
       -ms-transform:translate(-50%, -50%);
       -moz-transform:translate(-50%,0);
        text-align:center;
        background-color:#5b6370
        }

Answer 1

我觉得你的浏览器前缀有点乱。

.heroimage {
    position: relative;
    z-index: 10;
}

.heroimage article {
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 128px;
    -webkit-transform: translate(-50%,0%);
        -ms-transform: translate(-50%,0%);
            transform: translate(-50%,0%);
    text-align: center;
    background-color: #5b6370;
}

transform:translate 无法在 Safari 中工作

transform:translate not working in safari

html

css

safari