css - *完美*垂直图像对齐

Question

我有一个固定大小的正方形 div，希望使用 CSS 在其中放置任意大小的图像，以便它在水平和垂直方向上都居中。横向很容易:

.container { text-align: center }

对于垂直，常见的解决方案是:

.container {
    height: 50px;
    line-height: 50px;
}
img {
    vertical-align: middle;
}

但这并不完美，根据字体大小，图像会向下移动 2-4 像素左右。

据我了解，这是因为 vertical-align 所用的“中间”并不是真正的中间，而是字体上靠近中间的特定位置。一个(有点老套的)解决方法是:

container {
    font-size: 0;
}

这适用于 Chrome 和 IE7，但不适用于 IE8。我们希望使所有字体行都位于中间的同一点，但这似乎取决于浏览器以及可能使用的字体。

我能想到的唯一解决办法是修改行高，让它稍微短一点，让图片出现在正确的位置，但它看起来非常脆弱。有更好的解决方案吗？

在此处查看所有三种解决方案的演示: http://jsfiddle.net/usvrj/3/

没有 IE8 的用户可能会发现此屏幕截图很有用:

Answer 1

如果 css3 是一个选项，那么 flexbox 在垂直和水平对齐方面做得很好:

UPDATED FIDDLE

.container {
    display:flex;
    align-items: center; /* align vertical */
    justify-content: center; /* align horizontal */
}