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;
}

John Perri Cruz

About the Author

John Perri Cruz was born in the Philippines, at the cold month of december. (Not cold enough cause Philippines is a tropical country.)

He's currently working as a Fullstack Web developer and when not sleeping, he can be found in coffee shop most of the time.

He gained his experience and skills by making and developing websites and systems for various individuals. He is well equipped with different Web programming languages and tools.

Connect :


Buy me a cup of coffee :

Leave a Reply