Safari中的标题不是垂直居中的

Question

所以这个问题一直困扰着我。我有这个div容器，它将溢出图像居中到中心。

但是在Safari中，div内的图标不在中心。相反，它位于顶部。它在其他浏览器中工作正常。只有Safari有这个错误。

我在下面附上一个小提琴。感谢任何帮助！ ：）

JSfiddle demo

＆＃13;

＆＃13;

var $container = $('#page');
$container.masonry({
  columnWidth: '.grid-sizer',
  itemSelector: '.item',
  percentPosition: true,
  gutter: 10
});

＆＃13;

#page .item {
  width: calc(16.66% - 10px);
  display: inline-block;
  height: 0;
  float: left;
  padding-bottom: 16.66%;
  overflow: hidden;
  background-color: salmon;
  margin: 5px;
  position: relative;
}
#page .item.s1 {
  width: calc(50% - 10px);
  padding-bottom: 50%;
  overflow: hidden;
  background-color: navy;
}
.item > a {
  /* position: relative; */
  display: block;
  overflow: hidden;
  color: white;
}
.item:hover .grid-image:after {
  background: rgba(0, 0, 0, .7);
}
.item:hover .grid-image > img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.item:hover .item-caption {
  opacity: 1;
  z-index: 3;
  visibility: visible;
}
.item-caption,
.grid-image > img,
.grid-image:after {
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.item-caption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  text-align: center;
  opacity: 0;
  display: table;
  height: 100%;
  width: 100%;
}
.item-caption > div {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}
.grid-image {
  position: relative;
  overflow: hidden;
}
.grid-image img {
  display: block;
  overflow: hidden;
}
.grid-image:after {
  position: absolute;
  display: block;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container-fluid">

  <div id="page">

    <!-- GRID ITEM -->
    <div class="item s1">
      <a href="#">
        <div class="grid-image">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Pleiades_large.jpg/1024px-Pleiades_large.jpg">
        </div>
        <div class="item-caption">
          <div>
            <h5>I want this to be center</h5>
          </div>
        </div>
      </a>
    </div>
    <!-- /GRID ITEM -->

  </div>
</div>



</body>

</html>

＆＃13;

＆＃13;

＆＃13;