*完美*垂直图像对齐

Question

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

.container { text-align: center }

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

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

但这是不完美，根据字体大小，图像将在2-4px左右太远。

据我所知，这是因为用于垂直对齐的“中间”实际上不是中间，而是靠近中间的字体上的特定位置。一个（稍微有些hacky）的解决方法是：

container {
    font-size: 0;
}

这适用于Chrome和IE7，但不适用于IE8。我们希望在中间使所有字体线都相同，但根据浏览器和可能使用的字体，它似乎很容易被击中。

我能想到的唯一解决方案是破解线高，使其略短，使图像显示在正确的位置，但它看起来非常脆弱。有更好的解决方案吗？

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

没有IE8的人可能会觉得这个截图很有用：

Answer 1

如何将图像用作背景？通过这种方式，您可以始终将其集中在一这些方面的东西：

margin:5px;
padding:0;
background:url(http://dummyimage.com/50) no-repeat center center red;
height:60px;
width:60px;

Answer 2

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

UPDATED FIDDLE

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

Answer 3

这真是太烂了，但这是我们过去在ie6天所做的事情。

.container {
     position: relative;
}
img {
     position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -12px; // half of whatever the image's height is, assuming 24px
     margin-left: -12px; // half of whatever the image's width is, assuming 24px
}

我可能在这个例子中遗漏了一些东西，但是你明白了。

Answer 4

您是否尝试过以下操作：

img {
    display: block;
    line-height: 0;
}

我经常使用这个hack，但我还没有在IE8中彻底检查过它。

Answer 5

这是我做过的一个小小的JS小提琴：http://jsfiddle.net/rachit5/Ge4YH/

我相信它符合您的要求。

HTML：

<div>
    <img src=""/>
</div>

CSS：

div{height:400px;width:400px;position:relative;border:1px solid #000;}
img{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}