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

Question

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

.container { text-align: center }

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

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

但这并不完美，根据字体大小，图像会下降 2-4px 左右。

据我了解，这是因为用于垂直对齐的“中间”并不是真正的中间，而是靠近中间的字体上的特定位置。一个（有点老套）的解决方法是：

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 在垂直和水平对齐方面做得很好：

更新的小提琴

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

Answer 3

这真的很 hacky，但这是我们过去在 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 Fiddle：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;}