Html 垂直对齐：中间对齐<；img>；在一个div内没有'；t中心图像

我有一个名为product large的部门，里面有一个孩子的img。结构如下：

<div class="product-large">
         <img id="product-image" src="http://cf.shopious.com/images/store_logos/thumbnail/2159d3537713da6dd80c80b33c87bbc1ce2c2aac.jpg" alt="">
</div>

问题在于产品形象没有居中，而是停留在顶部。我已经在img css中使用了垂直对齐：中间对齐。为什么会这样

---

您可以看到完整的工作场所（在大图上检查元素）

我认为对于垂直对齐：中间，您需要：

display: table-cell;

对于图像

居中的替代方法

1） 获取img的固定高度和宽度，并设置位置：相对于图像和包含div
2） 将图像定位在50%顶部和50%左侧（现在左上角位于中间）
3） 在图像宽度的负半部分左侧应用边距，在图像高度的负半部分顶部应用边距

在名为container的div中使用200px cat映像的示例：

.container {position:relative; width:600px; height:600px; background:red;}

.cat {position:relative; height:200px; width:200px; top:50%; left:50%; margin-top:-100px; margin-left:-100px;}

编辑：如果图像大小不同，使用jQuery获取图像大小并在页面加载或文档就绪时应用居中CSS，此方法仍然有效

#main.product-detail .product-banner .product-large {
    display: table-cell;
    height: 437px;
    vertical-align: middle;
    width: 437px;
}

这会解决你的问题

试试这个

div * {margin-top:auto; margin-bottom:auto;}

---

在IMG上尝试不同的宽度和高度值和跨度上的不同字体大小值，您会看到它们始终保持在容器的中间。

我对HTML非常不好，但是将显示属性更改为绝对值或表可能修复。this@Accipheran我试着将表格单元格添加到大产品中，但它不起作用只是不是垂直对齐所做的。这在CSS中是一个非常常见的问题，有几种不同的解决方案，这取决于您的图像是否具有固定大小，CSS黑客是否正常，您需要什么样的浏览器兼容性，以及您希望保持HTML的干净程度…@minitech那么我如何解决这个问题？我只是想让图像居中，无论是垂直还是水平。图像大小各不相同。CSS黑客很好。@adit:，例如。