html - 垂直对齐：div内部的中间不居中图像

Question

我有一个名为 product-large 的 div，里面有一个 img 作为孩子。结构如下所示：

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

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

您可以在此处查看完整的工作站点（检查大图上的元素）

Answer 1

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

display: table-cell;

对于图像

Answer 2

居中的替代方法

1) 获取 img 的固定高度和宽度，并使位置：相对于图像并包含 div
2) 将图像定位在 50% 顶部和 50% 左侧（现在左上角在中心）
3) 应用边距-留在图像宽度的负一半处，并在 img 高度的负一半处应用 margin-top

在名为容器的 div 中使用 200px 猫图像的示例：

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

JS FIDDLE 链接 - http://jsfiddle.net/qhWLK/

编辑：如果图像大小变化，此方法仍然可以有效地使用 jQuery 获取图像大小并在页面加载或文档准备好时应用居中 CSS

Answer 3

尝试这个

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

这将解决您的问题。

jsFiddle 代码

Answer 4

尝试这个

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

在 img 上尝试不同的宽度和高度值，在 span 上尝试不同的字体大小值，您会发现它们始终保持在容器的中间。