Center image in body with fullpage.js

Question

Due to SEO reasons I put my images into the body section rather than as background pictures like so:

<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>

I tried to style the images like here:

https://jsfiddle.net/gnq52ygu/

I want the pictures to center, when the screen gets smaller. Right now the pictures stay fix at the left side.

As soon as I style the img tag there's some conflict with fullscreen.js.

Can anyone help me please?

Answer 1

Perfectly center? Both horizontally and vertically? This can be done like so:

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