需要根据窗口宽度因缩放而将元素与其兄弟元素垂直对齐

Question

我有一个元素总是需要与它的兄弟元素垂直对齐，无论窗口宽度是多少。我希望能够用CSS做到这一点，但似乎可能需要用JavaScript来完成。如果是这样的话，jQuery是可以的，它只需要支持现代浏览器（IE 11 +）。

关于这一点的棘手部分是它需要占图像的50％而不是整个容器。

请注意：div.icon的父母或兄弟不能更改标记或样式。

https://jsfiddle.net/thebluehorse/srp7g2cf/

.container {
  position: relative;
}
.slide {
  float: left;
  height: 100%;
  min-height: 1px;
}
img {
  width: 100%;
  display: block;
}
.icon {
  height: 8vw;
  width: 8vw;
  background: blue;
  position: absolute;
  top: 50%;
}
body {
  font-size: 100%;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="container">
  <div class="list clearfix">
    <div class="slide">
      <img src="http://placehold.it/1800x750">
    </div>
  </div>
  <div class="icon"></div>
  <ul>
    <li>Lorem ipsum dolor sit amet, et hymenaeos elit orci, rutrum dolor magna pellentesque ante euismod magna, sodales turpis quos class condimentum. Integer in vel etiam. Etiam pellentesque nibh phasellus sed, eget ipsum enim sed in et at, non ligula quis
      egestas sed quis. Lectus vitae, lobortis vestibulum maecenas auctor lorem eros, luctus vitae aliquam aliquam ipsum ligula nascetur, habitasse eu lectus imperdiet leo. Ut est fusce class conubia nunc felis, proin aliquam vitae nunc accumsan orci.
      A eu erat in.</li>
    <li>Ut in integer pulvinar maiores, mi sapien litora nunc ut, neque netus in ac. Et nullam, donec sapien laoreet, ullamcorper vestibulum et sed at arcu, erat scelerisque vehicula justo nam malesuada vehicula, per nibh nibh elit justo. Tempus omnis, mattis
      taciti cras a.</li>
  </ul>
</div>

Answer 1

一种选择是使用calc()从top: 50%中减去一半元素的高度：

.icon {
  position: absolute;
  top: calc(50% - 4vw);
  height: 8vw;
  width: 8vw;
}

当然，您也可以使用等于元素高度一半的负边距替换元素：

.icon {
  position: absolute;
  top: 50%;
  margin-top: -4vw;
  height: 8vw;
  width: 8vw;
}

根据评论，由于您正在使用slick library，因此您需要将.icon元素附加到滑块，以便它绝对定位 relative 对它。

您可以收听init事件，然后相应地添加图标：

Updated Example

$('.list').on('init', function(event, slick) {
  var $icon = $(this).closest('.container').find('.icon');
  $(this).append($icon);
});

Answer 2

如果我让你正确，你想让图标垂直居中，如果是这样，只需将top和bottom设置为0，然后添加margin：auto。请参阅下面的更新代码。

.icon {
  height: 8vw;
  width: 8vw;
  position: absolute;
  top: 50%;
}
.icon:before {
   background: blue;
  content: '';
  height:100%;
  width:100%;
  position: relative;
  display: block;
  top: -50%;
}

Answer 3

你不需要jQuery。

只需将.icon的样式替换为下一个：

MAX_SIZE - 3 - x

https://jsfiddle.net/srp7g2cf/5/