css transform：翻译IE中的破解布局

Question

很难弄清楚如何修复IE中的布局问题。

为了将我的网站标题集中在我的标题中，我正在使用css转换。

.herobox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

这适用于chrome，firefox，mobile等...

但是当我在IE中查看该网站时，它会导致一个巨大的水平滚动条，我似乎无法摆脱它。

似乎IE认为该元素仍然没有移动到屏幕的中心，仍然位于页面的右侧。

如果我只从css中删除了transform元素，我就明白了。

.herobox {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
}

当我一起移除herobox元素时，它会移除我的网站标题和所有有趣的东西，屏幕右侧的水平滚动条和空白区域消失。

我很难过。

更新 我当前的标头css样式。

/*------------------------------------*
#HEADER-STYLES
\*------------------------------------*/

header {
    height: 75vh;
    color: #fff;
    /* NEEDED TO POSITION ELEMENTS INSIDE HEADER */
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(cssimages/header-footer/headerbkrnd3-xsm-min.jpg) no-repeat center center;
    background-size: cover;
}

我不得不暂时改为使用保证金：0自动和最高：25％，直到我能弄清楚为什么css转换不起作用即11。如果它在IE之前没有工作就不会打扰我9，但很多人仍然使用IE11。