使用fullpage.js在主体中居中心图像

Question

由于搜索引擎优化的原因，我将我的图像放入身体部分，而不是像背景图片那样：

<div id="fullpage">
    <div class="slide" ><img class="l-cover" data-src="imagelink1"></div>
    <div class="slide" ><img class="l-cover" data-src="imagelink2"></div>
    <div class="slide" ><img class="l-cover" data-src="imagelink3"></div>
</div>

我尝试像这样设置图像样式：

https://jsfiddle.net/gnq52ygu/

当屏幕变小时，我希望图片居中。现在，图片保持固定在左侧。

我设置img标记的样式与fullscreen.js存在冲突。

有人可以帮我吗？

Answer 1

完美的中心？水平和垂直？这可以这样做：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}