<section>
  <div class="item position--vertical">
    <img src="http://placehold.it/100">
  </div>
</section>

<section>
  <div class="item position--horizontal">
    <img src="http://placehold.it/100">
  </div>
</section>

<section>
  <div class="item position--middle">
    <img src="http://placehold.it/100">
  </div>
</section>
img{
  display: block;
  width: 100%;
}

section{
  width: calc(100% / 3 - 20px);
  float: left;
  height: 500px;
  position: relative;
  background-color: #ddd;
  margin: 10px;
}

section .item{
  position: absolute;
  width: 100px;
  height: 100px;
}

.position--vertical{
  left: 10px;
  top: calc(50% - 50px);
}

.position--horizontal{
  top: 10px;
  left: calc(50% - 50px);
}

.position--middle{
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.