Center Image vertically and horizontally inside div

Center Image vertically and horizontally inside div

This code will render each images consistently within bootstrap grid

HTML


<div class="col-md-3">
    <div class="img-container">
        <a href="#">
            <img class="img-responsive" src="../image-source.jpg" alt="" title="" height="150">
        </a>
    </div>
</div>

CSS

.img-container {
    height: 160px;
    width: 160px;
    position: relative;
    margin: auto;
}
.img-container img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Leave a Reply