vertical align center image in fixed size div

Question

I have a div which is 145px X 145px. I have an img inside this dive. The img could be of any size (longest side being 130px). I would like the image to be centered vertically in the div. Everything that I have tried works in most browsers, but not IE7. I need something that will work in IE7.

Solution 1

You can replace the image by a background on the div like this :

<div style="background:url(myimage.jpg) no-repeat center center"></div>

Solution 2

here's a cross-browser solution:

<div class="img-container"><img src="picture.png" class="cropped"/></div>


div.img-container {
     width: 390px;
     height: 211px;
     position: relative;
     margin-left: auto;
     margin-right: auto;
     overflow: hidden;
 }
img.cropped {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Solution 3

Not sure about IE7 but for IE9 and rest of the modern browsers following works.

    .picturecontainer{
        width:800px;
        height:800px;
        border:solid 1px;
        display:table-cell;
        vertical-align:middle;

    }
    .horizontalcenter{
        display:block;
        margin-left:auto;
        margin-right:auto;
        vertical-align:middle;
    }

To use it

<div class="picturecontainer"><img src="" class="horizontalcenter"/></div>

This places images at dead centre.

Solution 4

Using the line-height property solved the problem for me.

Reference: vertical-align image in div

HTML:

<div class="img_thumb">
    <a class="images_class" href="large.jpg" rel="images"><img src="http://www.minfo.pt/fotos/_cache/produtos/0/068.M.976010002__thumbnail_50_50_true_sharpen_1_1.JPG" title="img_title" alt="img_alt" /></a>
</div>

CSS:

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    line-height:120px;
    text-align:center;
}

.img_thumb img {
    vertical-align: middle;
}

Solution 5

Not sure what you have tried so far but the vertical-align CSS property should work if the images are displayed as inline elements.

Some info on vertical-align: http://www.w3schools.com/css/pr_pos_vertical-align.asp

If you have to account for all image heights, that is pretty much the only way without using JavaScript.

If the images are not inline elements and you only had to accommodate images of a consistent height, you could do something like this:

img {
    margin-top: -50px; /* This number should be half the height of your image */
    position: absolute;
        top: 50%;
}

Otherwise the only way I can think to accomodate images of varying height would be to do something similar with your CSS but set the negative margin to half of the image's height with JS.

View more solutions

Comments

[NickG]

But as he says, the images "img could be of any size". So the value of -50 would only work for images exactly 100px high. Therefore not sure why this answer has so many up-votes, when it doesn't solve the OP's problem?

[Chris Schmitz]

Yeah, my main answer is for varying sizes of images, but I provided some details on a couple other options as well. Did you read my whole answer or just the code?

[ndrizza]

anyways that's still my preferred solution.

[RantriX]

This solution was amazing. I searched all over the net and the two common solutions of table-cell and flexbox didn't work for me, but this one worked like magic.

[Michael Baldry]

I haven't tested this in any browsers other than chrome, but it works nicely there...

[Stevio]

This does not seem to work when the height of the image is bigger than the container.

[Sarah]

works perfectly thanks! may I add img.cropped{max-height: 100%; max-width: 100%;} for images that are bigger than the container

[Alex]

This is genius! Can't believe this isn't more widely used.

[mattia.corci]

This solution is amazing! It's clean and perfect! i don't know perfectly why it works, but it still works!

[ndrizza]

@Stevio: Yes, this is true. It's supposed to just center the image vertically - as desired in the question. It does not center the image horizontally (i.e., when the height is bigger than the container).