Center the position

center-the-position.markdown

Center the position

A Pen by Vincent Tang on CodePen.

License.

index.html

<div class="wrapper">
  <img class="ref-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/867725/2018-11-20%2011_13_05-Center%20the%20position.png">
  <img class="overlay-img overlay-calc" src="https://source.unsplash.com/random/200x100" alt="">
</div>

style.scss

@mixin screen-min($min) { @media (min-width: $min) { @content } };
body {
  padding: 20px;
}
.wrapper {
  width: 100%;
  max-width: 1000px;
  position: relative;
  @include screen-min(600px){max-width: 500px;}
  @include screen-min(800px){max-width: 700px;}
  @include screen-min(1100px){max-width: 1000px;}
  // Vertical red line halfway on background div
  &:after {
    content:'';
    position: absolute;
    width: 1px;
    height: 100%;
    border: 1px solid red;
    left: 50%;
    top: 0%;
    z-index: 20;
  }
  // Horizontal Blue line on background image
  &:before {
    content:'';
    position: absolute;
    height: 1px;
    border: 1px solid blue;
    width: 100%;
    top: 50%;
    left: 0%;
    z-index: 25;
  }
}

.ref-img {
  border: 1px solid black;
  width: 100%;
  background-size: cover;

}

.overlay-img {
  position: absolute;
  top: calc(50% - 50px); // base on imagesize height: * 0.5
  left: calc(50% - 100px); // based on image size width * 0.5
}
.overlay-calc {
  transform: translate(100%,100%); // needs to be a % based not hard px value
}