Image centered in element

Uses an inline-block element hidden with a negative margin to vertically-align an image to the middle of an element.

by thirdender

HTML

<div class="productImage"><img src="http://upload.wikimedia.org/wikipedia/commons/c/ce/BabyGnuAlpha.png" alt="GNU" /></div>

CSS

.productImage {
    display: inline-block;
    border: 2px solid #ccc;
    /* Change these 'height' and 'width' values to see the image
       stay centered within the box */
    height: 200px;
    width: 120px;
    text-align: center;
}
.productImage:before {
    content: '';
    display: inline-block;
    height: 100%;
    width: 100%;
    margin-left: -100%;
    vertical-align: middle;
}
.productImage img {
    width: 50px;
    vertical-align: middle;
}

/* Make me pretty… */
body {
    margin: 20px;
    text-align: center;
}

.productImage {
    box-shadow: 0 0 200px -20px rgba(0, 0, 0, .1) inset;
}