Center an image sample

by Roshan Karunarathna

HTML

<div class="img-wrapper">
<img src="https://d3vonci41uckcv.cloudfront.net/old-images/original/50cf93cd-a9df-4a11-8df6-bbf2d90867e5.Bentota-Sri-Lanka.jpg" alt="my image"/>
</div>

CSS

img {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
}
div.img-wrapper{
  position:relative;
  width:auto;
  height:100px;
}