How do I vertically center an image in a div?

Question

Suppose the image is 100w x 300h. But I have a div that is always 100x100. I want to center the image (so that the top and bottom get cut off)

Note: The height will always be variable. It's not always 300.

How can I do that in JQuery?

Answer 1

Why don't you just set the image as a background property of the div? Straight CSS solution, no js necessary:

.cutoffAndCentered { width: 100px; height: 100px; background: url('image.jpg') no-repeat center center; }

Or you can always do the same via jQuery:

$('.myDiv').css('background','url(image.jpg) no-repeat center center');

Answer 2

You should use display: table-cell and overflow:hidden; This tutorial should help http://www.brunildo.org/test/img_center.html