Horizontal center image of fixed height.

by brunomuller

HTML

<div class="wrapper">
    <img src="//google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="">
</div>

CSS

.wrapper {
    margin-left: 150px;
    border: 3px solid red;
    width: 300px;
    height 200px;
}

.wrapper img {
    height: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid blue;
}