Question

I have a container which is 100px by 100px. I have put an image in it which I don’t know the dimensions, except the fact that I have set the width to 100px. I would like to find a way in CSS to vertically align this image middle in it’s container. I have stuck overflow:hidden on the container to prevent it from showing anything outside the square.

I have found something on here on how to do the opposite (width, not height).

Answer 1

Wrap the image inside two divs that will mimic an html table. The outer div will have display: table property, and the inner will have display: table-cell property. You can set the vertical-align property of the inner div to be top, middle, or bottom.

HTML:

<div class="table">
    <div class="table-cell middle">
        <img src="https://www.google.ca/images/srpr/logo3w.png" alt="" />
    </div>
</div>​

CSS:

.table {
    display: table;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
.table-cell {
    display: table-cell;
}
.middle {
    vertical-align: middle;
}
img {
    width: 100%;
    outline: 1px solid red;
}

Here’s the fiddle.