标题部分视差滚动效果jQuery和垂直中心边距

我有一个带有背景图像的标题部分和一个带有徽标的元素。
现在这个标志是以jQuery为中心的。 当我尝试向徽标添加视差效果时，它不再居中，因为我还对视差使用了边距更改

这是我的代码，我还添加了一个JS Fiddle链接（视差效果在编辑器iframe中不起作用，因此您必须在新窗口中打开示例）

代码：

---

不要使用负边距将绿色框居中，而是尝试此居中方法：

section.head .inner {
  position: relative;
  top: 50%;
  left: 50%;
  background-color: green;
  -webkit-transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
}

您必须编辑JS以删除负边距。只需删除以下行：

$(".head .inner").css('margin-top',viewportHeightInnerMargin);
$(".head .inner").css('margin-left',viewportHeightInnerMargin);

$(".head .inner").css('margin-top',viewportHeightInnerMargin);
$(".head .inner").css('margin-left',viewportHeightInnerMargin);