Chrome和Safari中的不同中心具有相同的CSS代码

Question

我正在尝试建立一个投资组合网站。该网站已完成，但其结果在不同的浏览器中有所不同。在Chrome中，一切都很完美，但在Safari中，事情变得奇怪。我的英雄文本框和英雄图像图标以chrome为中心，在safari中向右，而不更改代码。我在下面发布了一些代码和图片。

.hero-text-box {
    position: absolute;
    width: 1140px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.hero-icon-box {
    position: absolute;
    width: 1140px;
    top: 92%;
    left: 50%;
    transform: translate(-50%, -50%);
}

第一张图片是镀铬第二张图片。