垂直对齐具有未知高度和宽度的图像答案

【问题标题】：Vertical align image with unknown height and width垂直对齐具有未知高度和宽度的图像
【发布时间】：2012-11-04 07:50:49
【问题描述】：

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

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

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

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

【问题讨论】：

你想要这个吗？ jsfiddle.net/uH4Rn/6我不确定这是否应该是这个样子..
@Usha 不，您可以在图像中看到中间线，它应该位于该 div 的中心，现在它位于中心下方
您认为图像上的填充属性包装有什么帮助吗？使用 link 编辑 cmets
@bonCodigo 无法真正看到当我需要图像根据其高度变为负偏移或正偏移时填充将如何帮助
好吧，我想如果没有人有任何解决方案，我将不得不为此使用 js：/

标签： css

【解决方案1】：

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

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

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

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

【讨论】：