CSS - vertical/middle centered image

by katalin_2003

HTML

<section class="image">
  <img src="http://placehold.it/100x100" class="verCenter">
</section>

CSS

section {
  display: block;
  max-width: 500px;
  background: #70cfd8;
  margin: 0 auto 1em;
  height: 200px;
  border-radius: .5em;
}

.verCenter { 
    position: relative;
    top: -webkit-calc(50% - 50px ); /*50px = half the image */
    top: calc(50% - 50px); 
  
}

.image {
  text-align: center;
}