css - 垂直对齐具有未知高度和宽度的图像

Question

这么经典的css问题，垂直对齐，不过这次有点复杂，请看这个fiddle：http: //jsfiddle.net/uH4Rn/2/

很明显，我希望图像在中间完全对齐，你可以看到它不起作用我认为问题出在这两行：

top:-25%;
margin-top:-100px;

顺便说一句，我不关心低于 9 版本的 IE，我想避免使用 javascript 或 jquery。

Answer 1

由于先前的答案似乎没有给您正确的结果，因此这是另一个肯定有效的答案。除非我完全不明白你的问题。

此解决方案将使给定容器中的任何图像居中：

.container{
    width: 300px;
    border: 1px solid black;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
​

小提琴：http: //jsfiddle.net/uH4Rn/2/