完美的垂直图像对齐

Question

我有一个固定大小的正方形div，希望将任意大小的图像置于其中央，水平和垂直方向都居中，使用CSS实现。水平方向很容易:

.container { text-align: center }

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

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

但这并非完美的解决方案，具体取决于字体大小，图像会向下偏移大约2-4像素。

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

container {
    font-size: 0;
}

这在Chrome和IE7中有效，但在IE8中无效。我们希望所有的字体都是相同的高度，位于中间，但似乎因浏览器和可能使用的字体而异。

我唯一想到的解决方案是通过篡改行高（使其略短）来使图像出现在正确位置，但它似乎非常脆弱。是否有更好的解决方案？

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

没有IE8的用户可能会发现这张截图有用：

- Steve

---

+1 只是为了感谢你提出了一个写得很好并且演示非常整洁的问题！ - bPratik

我使用jQuery并在页面加载时计算边距来实现类似的效果。不太好看，但在IE6+和其他浏览器上都能工作。 - alxbrd

你尝试过在容器中添加 display: table-cell; 吗？据我所知，vertical-align 属性可以有两种不同的含义，一种是用于表格单元格内容，另一种是用于内联元素。 - jeffjenx

display: table-cell 看起来是一样的，例如 http://jsfiddle.net/usvrj/6/ 的第四个例子。 - Steve

那么表本身呢？它也有这些问题吗？ - Cesar Canassa

字体大小：0；这拯救了我的一天，谁知道呢？？谢谢。 - Adrian Harris in London

Answer 1

如果使用css3，那么flexbox可以很好地实现垂直和水平对齐： 更新的FIDDLE

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

- Danield

Answer 2

你可以将你的图片作为背景，这样可以在各个位置上始终保持居中。示例代码如下：

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

- Arthur K

---

这不是问题的确切解决方案，但似乎这是获得完美位置的唯一方法，所以我会接受它。要么这样，要么在CSS中接受一个小的行高hack。 - Steve

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
}

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

- Shauno

---

这是一种很好的居中方式，而不是IE6的hack。但是对于他来说，这个解决方案并不适用，因为图像大小是任意的，所以无法计算边距。 - Cesar Canassa

Answer 4

你尝试过以下方法吗：

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

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

- Mateusz Hajdziony

---

你能举个在任何浏览器中运行的例子吗？使用 display: block 时，垂直对齐无法工作，所以我不知道这怎么可能会起作用。 - Steve

你说得对，父容器也需要一个 display: table-cell。或许只尝试一下 line-height: 0？ - Mateusz Hajdziony

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;}

- pixlboy