JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

HTML

<div class="wrap">
  <img src="https://static.pexels.com/photos/129574/pexels-photo-129574-medium.jpeg" />
</div>

CSS

.wrap {
    height: 500px;/* max image height */
    width: 600px;
    border: 1px solid blue;
    text-align: center;
}
.wrap:before{
  content:"";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 1px;
}

img {
    vertical-align: middle;
}