Vertically align image using CSS only

by Jayson Buquia

HTML

<div class="img-container">
    <img src="http://www.placehold.it/600x500" alt="">
</div>

CSS

.img-container {
    height: 200px;
    width: 300px;
    border: 1px solid red;
    margin: 150px auto;
    /* overflow: hidden; */
    
}

img {
    width: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* margin-top: -50%; */
}